javascript - Progress Bar for Iframe File Uploads? - Stack Overflow

admin管理员组

文章数量:1022169

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.

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.

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited Dec 12, 2011 at 20:22 Ivan asked Dec 12, 2011 at 20:14 IvanIvan 10.4k1212 gold badges4848 silver badges7979 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

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.

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.

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited Dec 12, 2011 at 20:22 Ivan asked Dec 12, 2011 at 20:14 IvanIvan 10.4k1212 gold badges4848 silver badges7979 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签：