Jquery ajax загрузка одного файла

Question

Я знаю, что этот вопрос задан очень много, и я пробовал по меньшей мере 10 различных кодов, чтобы запустить это без успеха. Я пытаюсь загрузить один файл с jquery.ajax, но он не работает. ниже код всегда выдает: 'Пожалуйста, выберите файл', потому что имя файла не установлен или что-то

HTML:

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

JQuery:

$(function() 
$(document).ready(function(){ 
    var files; 

    $('input[type=file]').on('change', prepareUpload); 
    function prepareUpload(event){ 
     files = event.target.files; 
    }; 
    $(':button').click(function(){ 
     var formData = new FormData(); 
     $.each(files, function(key, value){ 
      formData.append(key, value); 
     }); 
     alert(formData); 
     $.ajax({ 
      url: 'check.php', 
      type: 'GET', 
      data: formData, 
      success:function(data){ 
            $('#result').html(data); 
           }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 
    }); 
}); 

});

PHP:

 if(isset($_GET['file'])){ 
    $filename = $_FILES['file']['name']; 
    if(isset($filename) && !empty($filename)){ 
     echo 'sup my man?!'; 
    }else{ 
     echo 'please choose a file'; 
    } 
}else{ 
    echo 'not set'; 
} 

Я не знаю, в чем проблема, я знаю, что в создании объекта FormData, потому что alert- хорошо идти, не работает.

Заранее благодарим за помощь. Кстати, для меня очень важно, чтобы это было написано в jquery.

Answer 1

A. Захват файла данных из поля файла

Первое, что нужно сделать, это привязать функцию к событию изменения на вашем поле файла и функции для захвата данных файла:

// Variable to store your files 
var files; 

// Add events 
$('input[type=file]').on('change', prepareUpload); 

// Grab the files and set them to our variable 
function prepareUpload(event) 
{ 
    files = event.target.files; 
} 

Это сохраняет данные файла в файловой переменной для последующего использования.

B. Ручка загрузки файла на отправить

Когда форма будет отправлена ​​вам нужно обработать загрузку файла в его собственном запросе AJAX. Добавьте следующий переплет и функцию:

$('form').on('submit', uploadFiles); 

// Catch the form submit and upload the files 
function uploadFiles(event) 
{ 
    event.stopPropagation(); // Stop stuff happening 
    event.preventDefault(); // Totally stop stuff happening 

// START A LOADING SPINNER HERE 

// Create a formdata object and add the files 
var data = new FormData(); 
$.each(files, function(key, value) 
{ 
    data.append(key, value); 
}); 

$.ajax({ 
    url: 'submit.php?files', 
    type: 'POST', 
    data: data, 
    cache: false, 
    dataType: 'json', 
    processData: false, // Don't process the files 
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
    success: function(data, textStatus, jqXHR) 
    { 
     if(typeof data.error === 'undefined') 
     { 
      // Success so call function to process the form 
      submitForm(event, data); 
     } 
     else 
     { 
      // Handle errors here 
      console.log('ERRORS: ' + data.error); 
     } 
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
     // Handle errors here 
     console.log('ERRORS: ' + textStatus); 
     // STOP LOADING SPINNER 
    } 
}); 
} 

Что эта функция делает это создать новый объект FormData и добавляет каждый файл к нему. Затем он передает эти данные как запрос на сервер. 2 атрибуты должны быть установлены в ложь:

• ProcessData - Потому что JQuery будет преобразовывать файлы массивов в строк и сервер не может забрать его.
• contentType - установить значение false, поскольку jQuery по умолчанию использует приложение/x-www-form-urlencoded и не отправляет файлы. Кроме того, настройка на multipart/form-data тоже не работает.

C. Загрузить файлы

Быстрый и грязный PHP скрипт для загрузки файлов и передать обратно некоторую информацию:

<?php // You need to add server side validation and better error handling here 

$data = array(); 

if(isset($_GET['files'])) 
{ 
$error = false; 
$files = array(); 

$uploaddir = './uploads/'; 
foreach($_FILES as $file) 
{ 
    if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name']))) 
    { 
     $files[] = $uploaddir .$file['name']; 
    } 
    else 
    { 
     $error = true; 
    } 
} 
$data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files); 
} 
else 
{ 
    $data = array('success' => 'Form was submitted', 'formData' => $_POST); 
} 

echo json_encode($data); 

?> 

IMP: Не используйте это, как написать свой собственный ,

Д. Ручка формы подать

Метод успеха функции загрузки передает данные, передаваемые от сервера к функции представить. Затем вы можете передать, что к серверу, как часть вашего поста:

function submitForm(event, data) 
{ 
    // Create a jQuery object from the form 
$form = $(event.target); 

// Serialize the form data 
var formData = $form.serialize(); 

// You should sterilise the file names 
$.each(data.files, function(key, value) 
{ 
    formData = formData + '&filenames[]=' + value; 
}); 

$.ajax({ 
    url: 'submit.php', 
    type: 'POST', 
    data: formData, 
    cache: false, 
    dataType: 'json', 
    success: function(data, textStatus, jqXHR) 
    { 
     if(typeof data.error === 'undefined') 
     { 
      // Success so call function to process the form 
      console.log('SUCCESS: ' + data.success); 
     } 
     else 
     { 
      // Handle errors here 
      console.log('ERRORS: ' + data.error); 
     } 
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
     // Handle errors here 
     console.log('ERRORS: ' + textStatus); 
    }, 
    complete: function() 
    { 
     // STOP LOADING SPINNER 
    } 
}); 
} 

Конечная нота

Этот сценарий является только примером, вам нужно обрабатывать как сервера и клиента проверки на стороне и некоторые способ уведомлять пользователей о том, что происходит загрузка файла. Я сделал проект для него на Github, если вы хотите, чтобы он работал.

Referenced From

Answer 2

После нескольких часов поиска и ищет ответ, в конце концов, я сделал это !!!!! код ниже :))))

HTML:

<form id="fileinfo" enctype="multipart/form-data" method="post" name="fileinfo"> 
    <label>File to stash:</label> 
    <input type="file" name="file" required /> 
</form> 
<input type="button" value="Stash the file!"></input> 
<div id="output"></div> 

JQuery:

$(function(){ 
    $('#uploadBTN').on('click', function(){ 
     var fd = new FormData($("#fileinfo")); 
     //fd.append("CustomField", "This is some extra data"); 
     $.ajax({ 
      url: 'upload.php', 
      type: 'POST', 
      data: fd, 
      success:function(data){ 
       $('#output').html(data); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 
    }); 
}); 

В upload.php файле вы можете получить доступ к данным, передаваемых с $_FILES['file'].

Спасибо всем за то, чтобы помочь :)

Я принял ответ здесь (с некоторыми изменениями) MDN