jQuery File Upload 是一个流行的 jQuery 插件，用于在网页上实现文件上传功能。它提供了多文件选择、拖放上传、进度跟踪、图像预览和其他丰富的功能。
下面土嘎嘎小编分享一个简单的示例，演示如何使用 jQuery File Upload：
首先，确保引入了 jQuery 库和 jQuery File Upload 插件的相关文件。你可以从官方网站或其他资源中获取这些文件并将其包含在你的 HTML 文件中。
HTML：
〓〓html代码如下：〓〓
<input type="file" name="files[]" multiple>
<div id="progress">
<div class="bar"></div>
</div>
<div id="files"></div>
JavaScript：
〓〓javascript代码如下：〓〓
$(function () {
$('input[type="file"]').fileupload({
url: 'upload.php', // 指定服务器端处理上传的 URL（根据你的需求进行设置）
dataType: 'json',
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
},
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
}
});
});
在上面给出的示例中， <input type="file"> 标签用于选择要上传的文件。 #progress 元素展示上传进度条，它包含一个 #progress .bar 子元素表示进度条的填充状态。 #files 元素用于显示上传成功的文件名。
JavaScript 部分初始化了 fileupload 插件。你需要根据实际情况修改 url 属性为处理上传的服务器端 URL。在 progressall 回调函数中，通过计算已上传和总大小的比例来更新进度条的状态。在 done 回调函数中，使用 $.each 循环遍历上传成功的文件列表，并将其名称追加到 #files 元素中。
土嘎嘎技术网友情提示：上面给出的示例代码仅提供了一个基本的演示，你可能需要根据自己的需求和服务器端的处理逻辑进行定制。确保阅读 jQuery File Upload 的文档以获取更多详细信息和配置选项。