2014-02-04 3 views
0

У меня есть форма с вводом файла, которая представляет собой прекрасный файл, когда я использую действие по умолчанию для отправки формы. Но, когда я использую JQuery и AJAX для вызова PHP-файла, он, похоже, не получает файл. Есть ли что-то, что мне нужно добавить для отправки файлов через JQUERY/AJAX?Отправка формы с файлом с использованием JQuery и AJAX

Мой HTML:

<form id="photo-form" enctype="multipart/form-data" method="post" action=""> 
    <input type="hidden" name="MAX_FILE_SIZE" value="5000000"/> 
    <input type="file" class="upload-input" name="upload-new-input" autocomplete="off"/> 
    <input type="submit" name="submit" value="submit/> 
</form> 

Мой JQuery:

$(document).ready(function() { 
    $("#photo-form").submit(function(e) { 

     e.preventDefault(); 

     var dataString = $(this).serialize(); 

     $.ajax({ 
      type: "POST", 
      url: "uploadcover.php", 
      data: dataString, 
      async: false, 
      success: function(data) { 
       alert(data); 
      } 
     }); 

    }); 
}); 
+1

Вы не можете сделать это непосредственно. Использование плагина облегчит задачу. – asprin

+0

Вы можете использовать [ajaxForm] (http://www.malsup.com/jquery/form/) для этого. – Calvin

+0

вы можете с HTML5, см. [Этот ответ] (http://stackoverflow.com/a/8758614/560593), обратите внимание, что он не работает на IE ниже 10. В противном случае asprin говорит, что вам нужно будет использовать плагин как флеш и т. д. –

ответ

2

Вы можете использовать FormData загрузить файл с данными

Вот пример кода

JQuery

$("#photo-form").submit(function(e) { 
     e.preventDefault(); 
     var formData = new FormData($(this)[0]); 

     $.ajax({ 
      type: "POST", 
      url: "uploadcover.php", 
      data: formData, 
      async: false, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data) { 
       alert(data); 
      } 
     }); 
     return false; 
}) 

Вы можете получить на PHP

PHP КОД

$Img = $_FILES['upload-new-input']; 

Вы можете увидеть учебник Uploading files with jquery ajax

Надеется, что это помогает :)

0

Вы не можете получить доступ к файлу.

Вы можете использовать плагин, чтобы сделать это для вас, то есть https://github.com/blueimp/jQuery-File-Upload

Кроме того, в html5 можно получить доступ к файлу из входного файла в качестве сгустка. Вы можете отправить его с помощью formData.

Больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Смежные вопросы