PHP Lang
  1. PHP Lang
  3. как загружать файл асинхронно с помощью JQuery
Intereting Posts
Joomla – Допустимый размер памяти 1073741824 байт исчерпан Невозможно отключить отчет об ошибках в OpenCart (PHP) Проблема при расчете погодного отчета Google создать определенную папку для загрузки на основе роли пользователя и ограничить доступ к другой папке в laravel elfinder Символы UTF-8 в формате fwrite PHPExcel Как установить имя ячейки? Ошибка: данные усечены для столбца «lat» в строке 1 Как заставить работать ссылки, независимо от местоположения в структуре каталогов? Захват ошибок компиляции регулярных выражений Использование $ _SESSION для переноса данных Zend Elements и setRequired, setAllowEmpty, NotEmpty Выпадающее меню подтверждения CodeIgniter Опубликовать массив с помощью PHP-сокета Генерация QR-кодов из строк MySQL cURL ничего не возвращает?

как загружать файл асинхронно с помощью JQuery

Я хочу загрузить файл асинхронно с помощью jQuery – без использования PLUGIN.

JQuery для меня очень новичок, и, посмотрев на различные форумы, я закончил с этим кодом:

HTML: 

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#myform').submit(function() { var fileInput = document.getElementById('file'); var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); $.ajax({ type: "POST", url: "upload.php", data: formData, processData: false, contentType: 'multipart/form-data', beforeSend: function (x) { if (x && x.overrideMimeType) { x.overrideMimeType("multipart/form-data"); } }, success:function(msg){ //alert( "Data Uploaded: " + msg ); document.getElementById('display').innerHTML = msg; } }); return false; }); }); </script> </head> <body> <form enctype="multipart/form-data" id="myform" name="myform" method="POST"> <input name="file" type="file" id="file" name="file"/> <input type="text" name="txtValue" value="" id="txtValue">--> <input type="submit" value="Upload" id="button" name="button"/> <div id="display"></div> </form> </body> </html>

PHP: 

 <?php $uploaddir = './uploads/'; $file = $uploaddir . basename($_FILES['file']['name']); if (move_uploaded_file($_FILES['file']['tmp_name'], $file)) { $value = "success"; } else { $value = "error"; } echo $value; ?>

Этот код не работает, и каждый раз, когда «дисплей» DIV печатает «ошибку». Пожалуйста, помогите мне.

Возьмите скрытый div. Внутри этого div принимают iframe и устанавливают target формы на идентификатор iframe.

В jQuery. В после функции готовности документа добавьте обработчик события нагрузки (скажем, LEH) в iframe. Таким образом, когда форма отправляется и файл загружается, а iframe загружается, тогда LEH будет вызван

Это будет действовать как событие успеха.

Примечание: вам нужно сделать небольшие изменения, как в первый раз, когда страница загружается, а также загружается iframe. Таким образом, будет и первая проверка времени.

С HTML5 вы можете сделать загрузку файлов с помощью Ajax и jQuery. Кроме того, вы можете выполнять проверки файлов (имя, размер и тип MIME) или обрабатывать событие прогресса с тегом прогресса HTML5 (или div).

HTML: 

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress>

Вы можете сделать некоторую проверку, если хотите. 

 $(':file').change(function(){ var file = this.files[0]; var name = file.name; var size = file.size; var type = file.type; //Your validation });

Теперь Ajax submit с нажатием кнопки: 

 $(':button').click(function(){ var formData = new FormData($('form')[0]); $.ajax({ url: 'upload.php', //Server script to process data type: 'POST', xhr: function() { // Custom XMLHttpRequest var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // Check if upload property exists myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload } return myXhr; }, //Ajax events beforeSend: beforeSendHandler, success: completeHandler, error: errorHandler, // Form data data: formData, //Options to tell jQuery not to process data or worry about content-type. cache: false, contentType: false, processData: false }); });

Теперь, если вы хотите обработать прогресс. 

 function progressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded,max:e.total}); } }

ИСТОЧНИК

Вы можете использовать следующие плагины для загрузки файлов с помощью ajax:

  1. Плагин формы jQuery

  2. Uploadify

Плагин в первой ссылке обеспечивает очень полезные обратные вызовы. Вы можете проверить документацию по данной ссылке.

У меня есть пользовательский JQuery Form Plugin в моем проекте. JQuery необработанный объект xhr завернут в объект jqXhr, который не имеет ссылки на новое свойство загрузки xhr. Надеюсь, вы можете начать с этого нижеприведенного примера. HTML: 

  <input type="file" class="text-input" size="50" id="file_upload" value="" name="file_upload"/> var formData = new FormData($('form')[0]); $.ajax({ url: '/files/add_file', //server script to process data type: 'POST', xhr: function() { // custom xhr myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists //myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload } return myXhr; }, dataType: 'JSON', beforeSend: beforeSendHandler, success: function(data) { if (data.error){ showMessage(data.html, false, false); } else{ showMessage(data.html, false, false); setTimeout("window.location = 'path/to/after/uploading';",450) } }, error: function(data) { showMessage(data.html, false, false); }, // Form data data: formData, //Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false });