php - Laravel 使用 Ajax 上传文件

Question

我正在使用 Laravel 框架。我有一种向数据库添加新项目的形式，在该形式中用户还可以拖放文件。然后，会显示一个进度条，直到完成为止，使用 Ajax 将文件上传到服务器。

提交该表单后，我在 Controller 中运行 addItem 函数，我想要执行/检查:

1. 文件已托管在服务器中(上传成功)
2. 如果文件托管在服务器中，我如何找到它？ (我给它起了一个随机的名字)
3. 如果用户选择不提交表单，我希望从服务器中删除该文件，这样我就不会有未连接到数据库中任何项目的文件

您能否提出有关如何完成这些任务的任何想法？

Answer 1

要通过 AJAX 发送文件，您需要使用 FormData这是 XMLHttpRequest2 类，它不适用于 IE<10。

您还需要AJAX2显示进度。

通过 AJAX 提交包含文件和进度的示例提交表单:

这里我举了一个例子。在此示例中，表单使用 FormData 通过 AJAX 发送数据和文件，并使用 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');
      }
    });
});

看看如何工作!!:http://jsfiddle.net/0xnqy7du/3/

LARAVEL:

在 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();