The task is as follows: The user has the opportunity to upload several image files on the site, the download is performed without reloading the page, during the download a progressbar appears for each image separately when the images are downloaded, thumbnails of images are returned from the server and located below each progressbar. One progressbar is now implemented for all uploaded files, can you please tell how you can implement for each file separately? html:

<form id="formUploadFiles" enctype="multipart/form-data" action="ajax/UploadFiles" method="POST">

js:

 var bar = $('.progressbar'); var percent = $('.percent'); var status = $('#status'); // Ajax загрузка изображений $('#formUploadFiles').ajaxForm({ beforeSend: function (xhr) { var inputFile = document.getElementById('upload1').files; var percentVal = '0%'; //bar.show(); bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal); }, success: function () { }, complete: function (xhr) { status.append(xhr.responseText); //bar.hide(); var percentVal = '100%'; bar.width(percentVal) percent.html(percentVal); $(".deletePhoto").unbind('click'); $(".deletePhoto").on('click', function () { deletePhoto($(this)) }) } });
  • Who knows, you need to look at the documentation of the library you are using. - RubaXa
  • Jquery.form.js library - Asy

3 answers 3

HTML5 File API , and do not need to write loops

  • So not all browsers will work. - Asy

jquery.form.js - loads all files at once via iframe or XHR2 + FormData. The uploadProgress event is only in the second case. So to complete your task, you need another tool to upload files.

  • I understand, I actually appealed because I have not found another solution yet. - Asy
  • There are many [good solutions] [1] for uploading files, for example jQuery File Upload, FineUploader, Plupload and so on. [1]: google.com/search?q=javascript%20file%20uploader - RubaXa
  • I need a download in which the user can select several files at once to upload. - Asy
  • Any solution listed by me gives such an opportunity, overcome yourself and familiarize yourself with them. - RubaXa

So return in AJAX'e new copy to download the file, what's the problem? Those. when you select a picture, put JS there, which makes an AJAX request to create a duplicate of your form to select a picture

  • Not quite sure what you mean. - Asy