用ajax Laravel上传文件上传文件、ajax、Laravel

2023-09-10 17:48:14 作者:纯情小男生

即时通讯使用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();