PHP Lang
  1. PHP Lang
  3. Как загрузить несколько файлов с помощью PHP, jQuery и AJAX
Intereting Posts
Идентификатор ресурса №5: MySQL Предупреждение: preg_match (): Внутренний pcre_fullinfo () Как автоматическое обновление данных в базе данных в PHP Предотвращение фиксации сеанса путем обеспечения единственного источника создания сеанса должно быть безопасным случайным генератором Регулярное выражение для содержимого внутри <td> и </ td> Обновление или открытие страницы вставляет пустые данные в мою базу данных! PHP, From Сравнение дат PHP Невозможно выяснить, как запустить mysqli_multi_query и использовать результаты из последнего запроса Как создать событие Календаря Google без напоминания / Как получить учетные записи службы для олицетворения пользователей Пользовательская проверка не работает – Yii2-app-basic-Yii2 Вход и сеанс PHP Codeigniter :: удаление нескольких записей в флажке Найти разрешение JPEG с помощью PHP Запросить WMI удаленно с помощью PHP Несколько SUM для строки

Как загрузить несколько файлов с помощью PHP, jQuery и AJAX

Я разработал простую форму, которая позволяет пользователю загружать файлы на сервер. Первоначально форма содержит одну кнопку «Просмотр». Если пользователь хочет загрузить несколько файлов, ему нужно нажать кнопку «Добавить дополнительные файлы», которая добавит еще одну кнопку «просмотреть» в форме. Когда форма отправляется, процесс загрузки файла обрабатывается в файле «upload.php». Он отлично работает для загрузки нескольких файлов. Теперь мне нужно отправить форму, используя jQuery '.submit ()' и отправить запрос ajax ['.ajax ()'] в файл 'upload.php' для обработки загрузки файла.

Вот моя форма HTML: 

<form enctype="multipart/form-data" action="upload.php" method="post"> <input name="file[]" type="file" /> <button class="add_more">Add More Files</button> <input type="button" id="upload" value="Upload File" /> </form>

Вот JavaScript: 

 $(document).ready(function(){ $('.add_more').click(function(e){ e.preventDefault(); $(this).before("<input name='file[]' type='file' />"); }); });

Вот код для обработки загрузки файла: 

 for($i=0; $i<count($_FILES['file']['name']); $i++){ $target_path = "uploads/"; $ext = explode('.', basename( $_FILES['file']['name'][$i])); $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { echo "The file has been uploaded successfully <br />"; } else{ echo "There was an error uploading the file, please try again! <br />"; }

}

Любые предложения о том, как мне написать свою функцию .submit (), будут действительно полезными.

Solutions Collecting From Web of "Как загрузить несколько файлов с помощью PHP, jQuery и AJAX"

Наконец, я нашел решение, используя следующий код: 

 $('body').on('click', '#upload', function(e){ e.preventDefault(); var formData = new FormData($(this).parents('form')[0]); $.ajax({ url: 'upload.php', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, success: function (data) { alert("Data Uploaded: "+data); }, data: formData, cache: false, contentType: false, processData: false }); return false; });

HTML 

 <form enctype="multipart/form-data" action="upload.php" method="post"> <input name="file[]" type="file" /> <button class="add_more">Add More Files</button> <input type="button" value="Upload File" id="upload"/> </form>

Javascript 

  $(document).ready(function(){ $('.add_more').click(function(e){ e.preventDefault(); $(this).before("<input name='file[]' type='file'/>"); }); });

для загрузки ajax 

 $('#upload').click(function() { var filedata = document.getElementsByName("file"), formdata = false; if (window.FormData) { formdata = new FormData(); } var i = 0, len = filedata.files.length, img, reader, file; for (; i < len; i++) { file = filedata.files[i]; if (window.FileReader) { reader = new FileReader(); reader.onloadend = function(e) { showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("file", file); } } if (formdata) { $.ajax({ url: "/path to upload/", type: "POST", data: formdata, processData: false, contentType: false, success: function(res) { }, error: function(res) { } }); } });

PHP 

 for($i=0; $i<count($_FILES['file']['name']); $i++){ $target_path = "uploads/"; $ext = explode('.', basename( $_FILES['file']['name'][$i])); $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { echo "The file has been uploaded successfully <br />"; } else{ echo "There was an error uploading the file, please try again! <br />"; } } /** Edit: $target_path variable need to be reinitialized and should be inside for loop to avoid appending previous file name to new one. */

Используйте сценарий выше сценария для загрузки ajax. Это будет работать

Мое решение

  • Предполагая, что форма id = "my_form_id"
  • Он обнаруживает метод формы и форму действия из HTML

Код jQuery 

 $('#my_form_id').on('submit', function(e) { e.preventDefault(); var formData = new FormData($(this)[0]); var msg_error = 'An error has occured. Please try again later.'; var msg_timeout = 'The server is not responding'; var message = ''; var form = $('#my_form_id'); $.ajax({ data: formData, async: false, cache: false, processData: false, contentType: false, url: form.attr('action'), type: form.attr('method'), error: function(xhr, status, error) { if (status==="timeout") { alert(msg_timeout); } else { alert(msg_error); } }, success: function(response) { alert(response); }, timeout: 7000 }); });