通过 XMLHttpRequest2 上传 Laravel4 文件

Question

我是一名初学者到中级程序员，遇到以下问题（真的，无法通过搜索找到任何东西）：

Laravel 4 使用以下算法来操作文件，通过提交的表单上传：

$file = Input::file('foo');
...

我通过 XMLHttpRequest2 发送多个文件，能够监控每个文件的进度。这是示例：

HTML

<div class="div-files">
    <input type="file" class="input-files" multiple>
    <button class="btn-upload">Upload</button>
</div>

JavaScript

$(document).ready(function(){
    $(".btn-upload").click(function(){
        var files = $(".input-files")[0].files,
            div_files = $(".div-files");
        if (files.length == 0) {
            return false;
        } else {
            $(files).each(function(key, val) {
                div_files.append("<p>" + val.name + " <progress data-id=\"" + key + "\" value=\"0\" max=\"100\"></progress></p>")
                var data = new FormData(),
                    request = new XMLHttpRequest();
                data.append("SelectedFile", val);
                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        console.log(request.response);
                    }
                }
                request.upload.addEventListener("progress", function(e) {
                    $("progress[data-id=\"" + key + "\"]").val(Math.floor(100*e.loaded/e.total));
                }, false);
                request.open("POST", "/import");
                request.send(data);
            });
        }
    });
});

PHP

$file = $_FILES['SelectedFile'];
if ($file['error'] > 0) {
    return Response::json(array('status' => 'error', 'data' => 'An error occurred while uploading.'));
}
...

问题是我想以 Laravel-ish 方式操作文件，以便能够

$file->guessExtension();

和

$file->move($destinationPath, $fileName);

等等。但是php对待

$file = $_FILES['SelectedFile'];

作为另一个实例，我无法通过

$file = Input::file('SelecteFile');

任何帮助将不胜感激。谢谢。

Answer 1

以下是使用 jQuery 跟踪进度的方法：

$.ajax({
    // ...
    cache: false,
    processData: false,
    contentType: false,
    xhr: function () {
        var result = {};

        result = $.ajaxSettings.xhr();

        if (typeof result.upload === "object") {
            result.upload.addEventListener(
                "progress",
                function (e) {
                    if (e.lengthComputable) {
                        // here you have e.loaded and e.total
                    }
                },
                false
            );
        }

        return result;
    }
});