在laravel中上传AJAX文件

自从过去两天以来，我一直在努力让ajax文件上传工作在lavvel 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块

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。

Answer 1

关键在于你的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 }); 

Answer 2

实际上，您无法通过（基本）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); 

Answer 3

尝试使用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 }); } });