[英]AJAX file upload in laravel
自從過去兩天以來,我一直在努力讓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塊
<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
});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.