jQuery上传进度和AJAX文件上传

小编典典

jQuery上传进度和AJAX文件上传

ajax

看来我还没有清楚地传达出我的问题。我需要发送一个文件（使用AJAX），并且需要使用Nginx
HttpUploadProgressModule获取文件的上传进度。我需要一个很好的解决方案。我已经尝试过使用jquery.uploadprogress插件，但是我发现自己不得不重写其中的大部分内容，以使其在所有浏览器中都能正常工作并使用AJAX发送文件。

我所需要的只是执行此操作的代码，它需要在所有主要的浏览器（Chrome，Safari，FireFox和IE）中运行。如果我能找到可以处理多个文件上传的解决方案，那就更好了。

我正在使用 jquery.uploadprogress插件从NginxHttpUploadProgressModule获取文件的上传进度。这是在Facebook应用程序的iframe中。它可以在Firefox中使用，但不能在chrome
/ safari中使用。

当我打开控制台时，我得到了。

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

知道我该如何解决吗？

我也想在完成时使用AJAX发送文件。我将如何实施？

编辑：
我很快需要这个，这很重要，所以我要在这个问题上悬赏100分。第一个回答的人将获得100分。

编辑2：
Jake33帮助我解决了第一个问题。第一个对如何使用ajax发送文件做出回应的人也将获得100分。

阅读 206

2020-07-26

共1个答案

小编典典

这些天实际上可以使用AJAX上传文件。是的，AJAX，而不是诸如SWF或Java之类的cr脚的AJAX技术。

此示例可能会帮助您：https :
//webblocks.nl/tests/ajax/file-drag-
drop.html

（它还包含拖放界面，但很容易忽略。）

基本上可以归结为：

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

（演示：http :
//jsfiddle.net/rudiedirkx/jzxmro8r/）

所以基本上可以归结为这个=）

xhr.send(file);

filetypeof 在哪里Blob：http :
//www.w3.org/TR/FileAPI/

另一种（更好的IMO）方法是使用FormData。这样一来，您可以（1）以某种形式命名文件，以及（2）以表单形式发送其他内容（也有文件）。

var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);

FormData 使服务器代码更整洁并向后兼容（因为请求现在具有与普通表单完全相同的格式）。

所有这些都不是实验性的，而是非常现代的。Chrome 8+和Firefox 4+知道该怎么办，但我不知道其他任何人。

这就是我在PHP中处理请求的方式（每个请求1张图片）：

if ( isset($_FILES['file']) ) {
    $filename = basename($_FILES['file']['name']);
    $error = true;

    // Only upload if on my home win dev machine
    if ( isset($_SERVER['WINDIR']) ) {
        $path = 'uploads/'.$filename;
        $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }

    $rsp = array(
        'error' => $error, // Used in JS
        'filename' => $filename,
        'filepath' => '/tests/uploads/' . $filename, // Web accessible
    );
    echo json_encode($rsp);
    exit;
}

2020-07-26