通过XMLHttpRequest2上传Laravel4文件

时间:2015-01-03 22:42:41

标签: javascript php jquery laravel xmlhttprequest

我是初学者到中级程序员并且遇到了以下问题(实际上,通过搜索找不到任何内容):

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

非常感谢任何帮助。感谢。

1 个答案:

答案 0 :(得分: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;
    }
});