即时通讯使用laravel框架,我有添加一个新的项目数据库,并在该表单的用户也可以拖放文件不是一个进度条的形式desplayed直到它完成,用ajax上传的文件服务器
Im using 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 than a progress bar is desplayed until its completed, using ajax for uploading the file to the server.
在提交该表格我运行在一个控制器的addItem功能,我想做的事/检查:
Once submitting that form i run "addItem" function in a controller and I want to do/check:
该文件已经在托管服务器(成功上传)
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 wont have files that are not connected to any item on my database.
您能否提供我的想法如何完成这些任务?
Can you suggest me ideas how to complete these tasks?
要你需要使用的 FORMDATA
这是一类的 XMLHtt prequest2
,它不与工作IE浏览器< 10
To send files by AJAX you need to use FormData
which is a class of XMLHttpRequest2
, it doesn't work with IE<10.
您还需要 AJAX2 显示进度
样品提交表单文件和进展通过Ajax
在这里,我已经做出了表率。在这个例子中使用的形式通过AJAX发送数据和文件 FORMDATA
键,显示 #progress
使用上传进度百分比在进度
事件。显然,这是一个示例,它可以改变,以适应它。
Here I have made an example. In this example the form sends the data and files via AJAX using FormData
and show the upload progress percentage in #progress
using the progress
event. Obviously it is a sample and it could be changed to adapt it.
$('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');
}
});
});
请参阅如何工作的!!: http://jsfiddle.net/0xnqy7du/3/
See how works!!: http://jsfiddle.net/0xnqy7du/3/
LARAVEL
在 laravel
你可以用 输入::文件 ,移动到另一个位置,并保存在数据库中,如果您需要它:
In laravel
you can get the file with Input::file
, move to another location and save in the database if you need it:
Input::file('photo')->move($destinationPath, $fileName);
// Sample save in the database
$image = new Image();
$image->path = $destinationPath . $fileName;
$image->name = 'Webpage logo';
$image->save();