我想用 jquery 向这个 html 添加一个简单的进度条，最简单的方法是什么？我只需要一个百分比值和一个进度条。
<!DOCTYPE html>
<html>
<body>
<form action="basic.php" method="post" enctype="multipart/form-data">
Select file to upload:
<input type="file" name="file" id="file">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
最佳答案
我最近有一个元素，我应该做同样的事情。正如您可能所做的那样，我经历了很多插件，我发现 dmUploader 插件特别有用。它允许您通过拖放以及 input 标签获取图像。该插件可用HERE .
我在 CODEPEN 中创建了一个工作示例，我认为这是学习如何使用此插件的最佳方式。您可能会注意到，从 1 到 290 的 jQuery 代码行只是插件本身。由于插件没有 CDN 链接，我不得不将它粘贴到那里。让我们看一下代码:
HTML
<div class="SciSecPic">
<i class="fa fa-fw fa-picture-o"></i>
<label>
<span>Click to browse your picture</span>
<input type="file" title='Click to add Files' style="display:none;">
</label>
<div class="progress" style=" display:none;">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
</div>
你需要一个容器 div，在这个例子中叫做 SciSecPic，一个包含 span 和 input 的 label里面的标签。记住 input 是隐藏的，你的按钮是你的 span 标签。这就是这个插件的工作原理。然后你可以得到你的进度条，div 与 progress 类，在本例中是一个 Bootstrap 进度条。它主要是不显示的，只有在上传过程中才会显示。
CSS 不需要特殊设置，因此我将跳过该部分并让您引用工作示例。
jQuery - 设置 dmUploader
var readPic;
$(".SciSecPic").each(function () {
var self = $(this);
self.dmUploader({
//url: "/Something/ImageSaver",
url: "http://posttestserver.com/post.php?dir=ali",
dataType: "json",
allowedTypes: "image/*",
//extraData: {
//Name: self.data("name"),
//Id: ~~self.data("id")
//},
onInit: function () {
},
onNewFile: function (id, file) {
// showing progressbar
$(this).find(".progress").show(200);
/* preparing image for preview */
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
readPic = e.target.result;
}
reader.readAsDataURL(file);
};
},
onUploadProgress: function (id, percent) {
$(this).find(".progress-bar").width(percent + "%").attr("aria-valuenow", percent).text(percent + "%");
},
onComplete: function () {
var thisEl = $(this);
addPic(thisEl, readPic);
// to fadeout and reset the progress bar at the end
setTimeout(function () {
thisEl.find(".progress").hide(200, function () {
thisEl.find(".progress-bar").width("0%").attr("aria-valuenow", 0).text("0%");
})
}, 300);
}
});
});
该变量只是一个占位符，用于存储图像的 dataURL，以便稍后在上传完成时显示。如果您使用 MVC，则必须将 url 更改为 PHP 或 Controller 中的 .php 文件，这必然会发生什么。您还可以使用 extraData 方法添加额外数据。 dmUploader 为您提供了不同的回调函数。他们非常不言自明。例如，onUploadProgress 是您可以获取上传百分比并将其显示在进度条中的地方，onNewFile 是您可以显示进度条并读取 dataURL 中的图像的地方格式以在您的 HTML 标记中随时显示它，最重要的是 onComplete 上传完成后您可以在其中执行任何您想做的事情。这是我调用 addPic 函数的地方，我编写了该函数以在输入框顶部显示上传的图片。
为了简短回答，我不会在这里解释或复制addPic函数。顺便说一句，它很容易理解。差不多就是这样。现在你可以拥有你的 dmUploader。
关于javascript - 为文件输入添加进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35108438/