Laravel 使用 Ajax 上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25441893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel uploading file using Ajax
提问by Lihai
I'm using the Laravel framework. I have a form of adding a new item to the database and in that form the user can also drag and drop a file. Then, a progress bar is displayed until it's completed, using Ajax for uploading the file to the server.
我正在使用 Laravel 框架。我有一种向数据库添加新项目的形式，用户还可以以这种形式拖放文件。然后，在完成之前会显示一个进度条，使用 Ajax 将文件上传到服务器。
Once submitting that form, I run the addItemfunction in a controller and I want to do/check:
提交该表单后，我addItem在控制器中运行该函数，并且我想做/检查：
- That the file is already hosted in the server (successful upload)
- If the file is hosted in the server, how do I find it? (I gave it a random name)
- If the user chose not to submit the form, I wish to erase that file from the server, so I won't have files that are not connected to any item on my database
- 该文件已经托管在服务器中（上传成功）
- 如果文件托管在服务器中，我如何找到它？（我给它起了一个随机的名字）
- 如果用户选择不提交表单，我希望从服务器中删除该文件，因此我不会有未连接到数据库中任何项目的文件
Can you suggest any ideas on how to complete these tasks?
您能否就如何完成这些任务提出任何建议？
回答by SnakeDrak
To send files by AJAX you need to use FormDatawhich is a class of XMLHttpRequest2, it doesn't work with IE<10.
要通过 AJAX 发送文件，您需要使用FormDatawhich 是一类XMLHttpRequest2，它不适用于 IE<10。
You also need AJAX2to show progress.
您还需要AJAX2来显示进度。
SAMPLE SUBMIT FORM WITH FILES AND PROGRESS VIA AJAX:
通过 AJAX 提交带有文件和进度的示例提交表：
Here I have made an example. In this example the form sends the data and files via AJAX using FormDataand show the upload progress percentage in #progressusing the progressevent. Obviously it is a sample and it could be changed to adapt it.
这里我举了一个例子。在此示例中，表单使用 AJAX 发送数据和文件，FormData并#progress使用progress事件显示上传进度百分比。显然，这是一个样本，可以更改以适应它。
$('form').submit(function(e) { // capture submit
e.preventDefault();
var fd = new FormData(this); // XXX: Neex AJAX2
// You could show a loading image for example...
$.ajax({
url: $(this).attr('action'),
xhr: function() { // custom xhr (is the best)
var xhr = new XMLHttpRequest();
var total = 0;
// Get the total size of files
$.each(document.getElementById('files').files, function(i, file) {
total += file.size;
});
// Called when upload progress changes. xhr2
xhr.upload.addEventListener("progress", function(evt) {
// show progress like example
var loaded = (evt.loaded / total).toFixed(2)*100; // percent
$('#progress').text('Uploading... ' + loaded + '%' );
}, false);
return xhr;
},
type: 'post',
processData: false,
contentType: false,
data: fd,
success: function(data) {
// do something...
alert('uploaded');
}
});
});
See how works!!: http://jsfiddle.net/0xnqy7du/3/
看看是如何工作的！！：http: //jsfiddle.net/0xnqy7du/3/
LARAVEL:
拉维尔：
In laravelyou can get the file with Input::file, move to another location and save in the database if you need it:
在laravel你可以得到该文件Input::file在数据库中，移动到另一个位置并保存，如果你需要它：
Input::file('photo')->move($destinationPath, $fileName);
// Sample save in the database
$image = new Image();
$image->path = $destinationPath . $fileName;
$image->name = 'Webpage logo';
$image->save();
