首先，我们将了解如何使用 vanilla javascript 上传文件。稍后，我将展示如何使用 DropzoneJS 库来实现拖放文件上传。
如何使用 Vanilla JavaScript 上传文件
我们的项目有三个主要组成部分：
我们使用该 multiple 属性允许用户选择多个文件进行上传（即使 FormData 不可用，多个文件上传也会正常工作）。正如您将看到的， FileReader 允许我们向用户显示他们正在上传的文件的缩略图（我们将期待图像）。
对于不支持 FormData 或 FileReader的旧版浏览器，上传行为将退回到正常的非 ajax 文件上传。
有了这些，让我们开始编码吧！
第 1 步：标记和样式
让我们从一些基本的标记和样式开始。当然，这不是本教程的主要部分——我不会把你当作新手。
的html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>html5 File API</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="main"> <h1>Upload Your Images</h1> <form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="images" id="images" multiple /> <button type="submit" id="btn">Upload Files!</button> </form> <div id="response"></div> <ul id="image-list"> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="upload.js"></script> </body> </html>
很基本，嗯？我们有一个发布到 upload.php的表单，我们将在稍后查看它，以及一个类型为 的输入元素 file。请注意，它具有布尔 multiple 属性，允许用户一次选择多个文件。
这就是这里的全部内容。让我们继续前进。
CSS
body {
font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
padding:10px;
}
h1 {
margin-top:0;
}
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}这里没有什么大惊小怪的——我们只是为我们的上传表单创建了一些基本的样式。
第 2 步：PHP
我们还需要能够处理后端的文件上传，所以让我们接下来介绍。
上传.php
<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";请记住，这些是我一年轻松编写的 PHP 的第一行。您可能应该为安全做更多的事情；但是，我们只是确保没有上传错误。如果是这种情况，我们使用内置 move_uploaded_file 将其移动到 uploads 文件夹。不要忘记确保该文件夹是可写的。
所以，现在，我们应该有一个有效的上传表单。您选择一个图像（多个，如果您愿意并且您的浏览器允许），单击 上传文件！ 按钮，您会收到消息 成功上传图片。
到目前为止，我们的迷你项目如下所示：
但是，来吧，现在是 2020 年：我们想要的不止这些。你会注意到我们已经链接了 jQuery 和一个 upload.js 文件。让我们现在打开它。
第 3 步：javaScript
让我们深入了解用于文件上传的 JavaScript 代码！
(function () {
var input = document.getElementById("images"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
}();这是我们的开始。我们创建了两个变量： input是我们的文件输入元素，formdata 如果浏览器支持，将用于将图像发送到服务器。我们将其初始化为 false ，然后检查浏览器是否支持 FormData. 如果是，我们创建一个新 FormData 对象。另外，如果我们可以用 AJAX 提交图片，我们就不需要 上传图片了！ 按钮，所以我们可以隐藏它。为什么我们不需要它？好吧，我们将在用户选择图像后立即自动上传图像。
JavaScript的其余部分将进入您的匿名自调用函数。我们接下来创建一个小助手函数，一旦浏览器拥有图像，就会显示它们：
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}该函数采用一个参数：图像源（我们很快就会看到如何得到它）。然后，我们只需在标记中找到列表并创建列表项和图像。我们将图片来源设置为我们收到的来源，将图片放入列表项中，将列表项放入列表中。瞧！
接下来，我们必须实际拍摄图像、显示它们并上传它们。正如我们所说，我们将 在输入元素上触发onchange 事件时执行此操作。
if (input.addeventListener) { input.addEventListener("change", function (evt) { var i = 0, len = this.files.length, img, reader, file; document.getElementById("response").innerHTML = "Uploading . . ." for ( ; i < len; i++ ) { file = this.files[i]; if (!!file.type.match(/image.*/)) { } } }, false); }
那么，当用户选择了文件时，我们想要做什么呢？首先，我们创建一些变量。现在唯一重要的是 len = this.files.length。用户选择的文件可以从对象访问 this.files。现在，我们只关心 length 属性，所以我们可以遍历文件……这正是我们接下来要做的。在我们的循环中，我们将当前文件设置 file为以便于访问。我们要做的下一件事是确认该文件是一个图像。我们可以通过将type 属性与正则表达式进行比较来做到这一点。我们正在寻找一种以“image”开头并后跟任何内容的类型。（前面的双键只是将结果转换为布尔值。）
那么，如果我们手上有图像怎么办？
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}我们检查浏览器是否支持创建 FileReader 对象。如果是这样，我们将创建一个。
下面是我们使用 FileReader 对象的方式： 我们将把 file 对象传递给 reader.readAsDataURL 方法。这将为上传的图像创建一个 数据 URL。但是，它并不像您期望的那样工作。数据 URL 不会从函数传回。相反，它将成为事件对象的一部分。
考虑到这一点，我们需要在 reader.onloadend 事件上注册一个函数。这个函数接受一个事件对象，我们通过它获取数据 URL：它位于 e.target.result. 我们只是要将这个数据 URL 传递给我们的showUploadedItem 函数（我们在上面写过）。
接下来，我们检查 formdata 对象。请记住，如果浏览器支持 FormData, formdata 将是一个 FormData 对象；否则，它将是 false. 因此，如果我们有一个 FormData 对象，我们将调用该 append 方法。对象的 FormData目的是保存您通过表单提交的值，因此该append 方法只需要一个键和一个值。在我们的例子中，我们的关键是 images[]. 通过将方括号添加到末尾，我们确保每次我们append 另一个值时，我们实际上是将它附加到该数组，而不是覆盖 image 属性。
我们快完成了。在我们的 for 循环中，我们为用户显示了每个图像并将它们添加到 formdata 对象中。现在，我们只需要上传图片。在 for 循环之外，这是我们拼图的最后一块：
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}同样，我们必须确保我们得到 FormData 支持；如果我们不这样做， 上传文件！ 按钮将可见，这就是用户上传照片的方式。但是，如果我们有 FormData 支持，我们将负责通过 AJAX 上传。我们正在使用 jQuery 来处理跨浏览器的 AJAX 的所有奇怪之处。
您可能对 jQuery 的 $.ajax 方法很熟悉：您将其传递给一个选项对象。、 url和 属性应该是显而易见的type。 属性是我们的 success对象 。注意那些 和 属性。根据 jQuery 的文档， 默认 情况 下，它会将数据处理并转换为查询字符串。我们不想这样做，所以我们将其设置为 . 我们还设置 以 确保数据按照我们的预期到达服务器。dataformdataprocessDatacontentTypeprocessDatatruefalsecontentTypefalse
就是这样。现在，当用户加载页面时，他们会看到：
在他们选择图像后，他们会看到：
图片已上传：
这就是您可以使用 vanilla JavaScript 上传文件的方式。在下一节中，我们将看到如何使用 DropzoneJS 库实现文件上传。
如何使用 DropzoneJS 库
DropzoneJS 库是一个流行的免费库，它允许您在眨眼之间实现文件上传。它还支持拖放文件上传以及漂亮的预览功能。
让我们看看下面的代码，它用 DropzoneJS 实现了文件上传功能。
<!DOCTYPE html> <html> <head> <script src="./dropzone.js"></script> <link rel="stylesheet" href="./dropzone.css"> </head> <body> <form action="/upload.php" class="dropzone"> <div class="fallback"> <input name="images" type="file" multiple /> </div> </form> </body>
您必须先在 本地下载dropzone.js 和 dropzone.css文件。
除此之外，您只需要使用 dropzone 表单标签中的类，DropzoneJS 库将处理其余的！
让我们看看在浏览器中加载它时的样子。
如您所见，有一个部分允许您在其上放置文件。或者，您也可以使用默认的文件选择对话框从计算机中选择文件。继续并在其上放置一些图像文件，它应该会为您提供一个很好的预览，如下面的屏幕截图所示。
只需要几行代码，看起来是不是很神奇？实际上，DropzoneJS 库还允许您自定义 UI 和其他内容。我鼓励你检查 这个库提供的配置选项。
除此之外，还有 filepond库，它也是您可以使用的流行文件上传库。它提供拖放、进度条、预览和重新排序等功能。
最后
通过 AJAX 上传文件非常酷，而且这些新技术无需冗长的 hack 即可支持这一点，这非常棒。
- 的html
- CSS
- 上传.php
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
