Как использовать $ .ajax() для загрузки файлов

Question

Я получаю это сообщение, когда пытаюсь использовать $ _FILES для получения имени изображения.

Примечание: Undefined индекс: изображение в C: \ XAMPP \ HTDOCS \ upload_form \ upload_query.php на линии

У меня есть форма, которая загружает информацию об образ в базу данных mysql (phpmyadmin), а затем форма очищается с использованием JavaScript, чтобы пользователь мог загрузить другое изображение и информацию. Я читал, что вы не можете использовать $ _FILES, а также JavaScript, но я не уверен, почему, я также был бы признателен за решение.

Я новичок в php и JavaScript.

Это JavaScript.

$('form').on('submit',function() { 
var that= $(this), 
    url = that.attr('action'), 
    type = that.attr('method'), 
    data = {}; 

    that.find('[name]').each(function(index,value) { 
      var that = $(this), 
      name = that.attr('name'), 
      value = that.val(); 

      data[name] = value; 
    }); 

$.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function(response){ 
        console.log(response); 
     } 
}); 
    document.getElementById("upload_form").reset(); 
return false; 
}); 

Это php.

//image properties 
$name = $_FILES['image']['name']; 
$size = $_FILES['image']['size']; 
$temp = $_FILES['image']['tmp_name']; 
$error = $_FILES['image']['error']; 
$type = $_FILES['image']['type']; 
//**************** 

Это часть формы.

<form action='upload_query.php' class='appnitro' enctype='multipart/form-data' id='upload_form' method='post' name='upload_form'> 
    <ul> 
    <li id='li_1'> 
     <label class='description' for='image'>Upload a Picture</label>  
     <div> 
     <input class='element file' id='image' name='image' required="" type='file'> 
     </div> 
    </li>  
    <li id='li_2'><label class='description' for='name'>Name</label> <span><input class='element text' id='first_name' maxlength='255' name='first_name' placeholder='First Name.' required="" size='12' value=''></span> <span><input class='element text' id='last_name' maxlength='255' name='last_name' placeholder='Last Name.' required="" size='18' value=''></span></li> 
    </ul> 
</form> 

т.д.

Answer 1

Вы не можете отправить файлы с помощью AJAX (это не путь).

Если вы хотите отправить файлы, ознакомьтесь с XMLHttpRequest2. Довольно хороший учебник здесь - http://www.html5rocks.com/en/tutorials/file/xhr2/

Answer 2

---

Да, вы можете загрузить файлы, используя $.ajax здесь как

Во-первых, давайте имеют типичную форму с идентификатором. Эта форма может содержать ваш один или несколько файлов по вашему желанию.

<form id='fileupload' method='post' enctype="multipart/form-data" ... 

Затем в jQuery вы делаете следующее.

$('#btnupload').click(function() { 
    //the key is FormData object 
    var formData = new FormData(document.getElementById('fileupload')); 
    $.ajax({ 
     url: 'upload.php', //server script to process data 
     type: 'POST', 
     success: function (json) {} 
     data: formData, 
     dataType: "json", 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
}); 

Ключевым моментом здесь является использование объекта Javascript FormData построить параметр данных $.ajax