阅读量:0
要在使用 AJAX File Upload 插件时显示上传进度,你需要使用 XMLHttpRequest 对象的 upload
属性来监听上传进度事件。以下是一个简单的示例,展示了如何在 AJAX File Upload 中显示上传进度:
- 首先,确保你已经包含了 jQuery 和 AJAX File Upload 插件的 JavaScript 文件。在 HTML 文件中添加以下代码:
- 创建一个 HTML 表单,包含一个文件输入字段和一个进度条元素:
<form id="uploadForm"> <input type="file" name="fileToUpload" id="fileToUpload" /> <button type="submit">上传文件</button> </form> <div id="progressBarContainer"> <div id="progressBar"></div> </div>
- 在 CSS 中设置进度条的样式:
#progressBarContainer { width: 100%; background-color: #f3f3f3; } #progressBar { width: 0%; height: 30px; background-color: #4CAF50; }
- 使用 jQuery 监听表单提交事件,并使用 AJAX File Upload 插件上传文件。同时,监听上传进度事件并更新进度条:
$(document).ready(function () { $("#uploadForm").on("submit", function (e) { e.preventDefault(); var file = $("#fileToUpload")[0].files[0]; var formData = new FormData(); formData.append("fileToUpload", file); $.ajax({ url: "your_upload_script.php", // 替换为你的上传处理脚本 type: "POST", data: formData, processData: false, contentType: false, xhr: function () { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener( "progress", function (evt) { if (evt.lengthComputable) { var percentComplete = (evt.loaded / evt.total) * 100; $("#progressBar").css("width", percentComplete + "%"); } }, false ); return xhr; }, success: function (response) { console.log("上传成功"); }, error: function (err) { console.log("上传失败"); }, }); }); });
现在,当你选择一个文件并点击上传按钮时,进度条将显示上传进度。请注意,你需要将 your_upload_script.php
替换为你自己的服务器端上传处理脚本。