Я пытаюсь получить загрузку файла ajax, работая в lavavel 4 с последних двух дней, и сейчас я не в порядке.
мой блок jquery
$(document).ready(function(){ $('#basicModuleImage').change(function () { sendFile(this.files[0]); }); function sendFile(file) { $.ajax({ type: 'post', url: '/upload', data: file, enctype: 'multipart/form-data', success: function (data) { alert(data); }, processData: false, contentType: file.type }); } }); Блок HTML
<form method="post" action=""> <input type="file" id="basicModuleImage" name="basicModuleImage" /> </form>
Блок LARAVEL PHP
Route::post('upload', function(){ return Response::json(array('a'=>var_dump(Input::all()),'b'=>var_dump($_FILES))); });
Я также попытался использовать https://github.com/LPology/Simple-Ajax-Uploader, но это похоже на проблему с laravel.
Ответ JSON возвращает a и b как null.
Ключ находится в вашем запросе ajax. В контроллере вы можете делать все, что хотите.
var form = document.forms.namedItem("yourformname"); // high importance!, here you need change "yourformname" with the name of your form var formdata = new FormData(form); // high importance! $.ajax({ async: true, type: "POST", dataType: "json", // or html if you want... contentType: false, // high importance! url: '{{ action('yourController@postMethod') }}', // you need change it. data: formdata, // high importance! processData: false, // high importance! success: function (data) { //do thing with data.... }, timeout: 10000 });
Фактически, вы не можете отправлять файлы через (основной) AJAX (XMLHttpRequest).
Вам нужно использовать некоторый загружаемый файл iframe или XMLHttpRequest2.
Я бы пошел на XHR2.
Вот скопируйте часть кода, который я использую с Laravel4, работает как шарм
/** * Read selected files locally (HTML5 File API) */ var filesToUpload = null; function handleFileSelect(event) { var files = event.target.files || event.originalEvent.dataTransfer.files; // Itterate thru files (here I user Underscore.js function to do so). // Simply user 'for loop'. _.each(files, function(file) { filesToUpload.push(file); }); } /** * Form submit */ function handleFormSubmit(event) { event.preventDefault(); var form = this, formData = new FormData(form); // This will take all the data from current form and turn then into FormData // Prevent multiple submisions if ($(form).data('loading') === true) { return; } $(form).data('loading', true); // Add selected files to FormData which will be sent if (filesToUpload) { _.each(filesToUpload, function(file){ formData.append('cover[]', file); }); } $.ajax({ type: "POST", url: 'url/to/controller/action', data: formData, processData: false, contentType: false, success: function(response) { // handle response }, complete: function() { // Allow form to be submited again $(form).data('loading', false); }, dataType: 'json' }); } /** * Register events */ $('#file-input').on('change', handleFileSelect); $('form').on('submit', handleFormSubmit);
Попробуйте с FormData()
$(document).ready(function () { $('#basicModuleImage').change(function () { sendFile(new FormData($('form')[0])); }); function sendFile(file) { alert(file.type); $.ajax({ type: 'post', url: '/upload', data: file, success: function (data) { alert(data); }, processData: false, contentType: false }); } });