Laravel4 文件上传通过 XMLHttpRequest2.

Laravel4 File Upload via XMLHttpRequest2

本文关键字：XMLHttpRequest2 文件 Laravel4      更新时间：2023-09-26

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

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.'));
}
...

问题是我想以拉拉维尔式的方式操作文件，以便能够

$file->guessExtension();

和

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

等等。但是 php 对待 

$file = $_FILES['SelectedFile'];

作为另一个实例，我无法通过以下方式获得它

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

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

以下是使用 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;
    }
});
相关文章：