Iframe 文件上传进度条?

2024-04-04

我目前正在开发一个网络应用程序,该应用程序允许用户上传文件而无需重新加载页面。到目前为止,用户可以浏览文件,并且当输入更改时,将使用以下 iframe 技术上传文件:

HTML:

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe>
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
   <input type="file" name="files[]" multiple id="old-file-picker" >
</form>

JavaScript/jQuery:

$('#old-file-picker').change(function ()  {
  // Submit the form
  $('#old-style-upload').submit();
});
$('iframe[name=iframe-target]').load(function () {
  // Code that deals with the newly uploaded files
  $('#old-style-upload').get(0).reset();
});

这很有效,但是用户无法知道文件正在上传,也不知道需要多长时间。有没有办法制作一个进度条来显示文件上传的进度?

我唯一能想到的就是展示一个加载动图 http://www.ajaxload.info/.


为此,如果您使用常规的多部分/表单数据表单发布,则需要在服务器端有代码;可以将进度反馈给客户端浏览器中运行的 JavaScript。看一看在这个之前提出的问题 https://stackoverflow.com/questions/849237/upload-progress-bar-in-php。或者,您可以使用 Flash(但您可能不想)或 HTML 5。您可以查看该问题并这个关于 XMLHTTPRequests 的问题 https://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Iframe 文件上传进度条? 的相关文章

随机推荐