iframe文件上传的进度条？ [英] Progress Bar for Iframe File Uploads?

问题描述

我目前正在开发一个Web应用程序，允许用户在不重新加载页面的情况下上传文件。到目前为止，用户可以浏览文件，当输入发生变化时，文件将使用以下iframe技术上传： >

 < iframe name =iframe-targetsrc =./ Imagestyle =display：none; >< / iframe中> 
< form method =POSTenctype =multipart / form-dataid =old-style-uploadtarget =iframe-targetaction =./ Image> 
< input type =filename =files []multiple id =old-file-picker> 
< / form> 
  

Javascript / jQuery：

  $（'＃old-file-picker'）。change（function（）{
 //提交表单
 $（'＃old -style-upload'）。submit（）; 
}）; 
 $（'iframe [name = iframe-target]'）。load（function（）{
 //处理新上传文件的代码
 $（'＃old-style-上传'）。get（0）.reset（）; 
}）; 
  

这很好用，但是用户无法知道文件正在上传，它需要很长时间。有没有办法让进度条显示文件上传的进度？

我能想到的唯一方法就是显示一个 loading gif 。

解决方案

为此，如果您使用定期的多部分/表单数据表单帖子，你需要在服务器端有代码;一个可以反馈客户端浏览器中运行的JavaScript的进度。看一下先前提出的问题。或者，你可以使用Flash（但你可能不想）或HTML 5.你可以看看这个问题和这个关于XMLHTTPRequests的问题。

I'm currently working on a web application that allows the user to upload files without reloading the page. So far, the user can browse for files, and when the input is changed, the files are uploaded using the following iframe technique:

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();
});

This works great, however, the user has no way of knowing that the files are uploading, nor how long it will take. Is there any way to make a progress bar that displays the progress of the file uploads?

The only thing I can think of is to show a loading gif.

解决方案

To do this, if you use regular multipart/form-data form post, you'll need to have code on the server-side; one that can feed-back progress to the JavaScript running in the clients' browsers. Take a look at this previously asked question. Alternatively you might use Flash (but you probably don't want to) or HTML 5. You can take a look at that question and this question concerning XMLHTTPRequests.

这篇关于iframe文件上传的进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！