Мой запрос на отправку кода ajax, но он не показывает индикатор выполнения. Пожалуйста, помогите исправить код, чтобы показать рабочий график выполнения.
$(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file_path$i").val(); //get form data; $.ajax({ type: "html", url: "share.php",//onwhich post ajax data; enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); @whitneyit: мы можем использовать xhr: функцию ajax для отслеживания загрузки файла что-то вроде этого
$.ajax({ url: 'handler/FileUploader.ashx?FileName=' + file.name, //server script to process data type: 'POST', xhr: function () { myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', progressHandlingFunction, false); } return myXhr; }, success: function (result) { //On success if you want to perform some tasks. }, data: file, cache: false, contentType: false, processData: false }); function progressHandlingFunction(e) { if (e.lengthComputable) { var s = parseInt((e.loaded / e.total) * 100); $("#progress" + currFile).text(s + "%"); $("#progbarWidth" + currFile).width(s + "%"); if (s == 100) { triggerNextFileUpload(); } } }
Это из файла jQuery-Upload-Upload от BlueImp:
Прежде всего, скачайте: https://github.com/blueimp/jQuery-File-Upload/archives/master
Теперь загрузите папку js.
Сделайте свой .html:
<html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> <style> .bar { height: 18px; background: green; } </style> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <div id="progress"> <div class="bar" style="width: 0%;"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); } }); progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); } }); </script> </body> </html>
Я не тестировал это, но ДОЛЖЕН быть функциональным. Дайте мне знать, если это не так.
Необязательно. Включите содержимое <style></style> в ваш .css-файл.
Необязательно: включить .js в <script src=""></script> .js <script src=""></script> .
Источник: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
К сожалению, метод $.ajax не возвращает никакой информации о $.ajax .
Кроме того, для этого не существует решения crossbrowser, использующего только HTML и JavaScript. Я бы предложил посмотреть на Uploadify .