Question

我正在通过David Flanagan出色的书：JavaScript：The Definitive指南学习AJAX技巧。有一个关于文件上传的部分使用HTTP POST请求。它说，我引用，“XHR2 API，允许您通过将File对象传递给send（）来上传文件方法”。

我会把David的示例片段放在这里然后我正在做什么[这几乎是一样的：

// Find all <input type="file"> elements with a data-uploadto attribute
// and register an onchange handler so that any selected file is
// automatically POSTED to the specified "uploadto" URL. The server's
// response is ignored.

whenReady(function() {  // this function is defined elsewhere in the book. It serves the same purpose as jQuery(document).ready()
    var elts = document.getElementsByTagName('input'); // all input elements
    for(var i = 0; i < elts.length; i++){
        var input = elts[i];
        if(input.type !== "file") continue;     // skip all but file upload elts
        var url = input.getAttribute('data-uploadto');  // get upload url
        if (!url)   continue;

        input.addEventListener('change', function(){    // when user selects a file
            var file = this.files[0];       // assume a single file selection
            if(!file) return;               // If no file, do nothing
            var xhr = new XMLHttpRequest(); // Create a new request
            xhr.open('POST', url);          // POST to the URL
            xhr.send(file);                 // Send the file as body
        }, false);
    }
});

我试图用我的html中的<input type="file">元素复制相同的想法。这就是我所拥有的，包括html页面底部的以下JavaScript：

<script>
var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function(){
var imageFile = input.files[0];
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
    if(request.readyState === XMLHttpRequest.DONE && request.status === 200) console.log('Image has been uploaded');
}
request.open('POST', /* I type here the url for the root directory of the site / html file I'm working with */);
request.send(imageFile);
}); 
</script>

注意：

我要上传的文件类型是图片。
我的工作是假设我正在尝试上传的图片不需要一些PHP脚本来处理它。
如你所见，我使用普通的旧javscript，
我知道它知道有效，因为我没有看到我应该通过javscript片段上传的图像文件。

所以我的问题是：这里的javascript有错误吗（我没有看到任何控制台错误）？或者，使用ajax的其他机制允许我上传图像？

感谢您的耐心等待。

Answer 1

您应该使用FormData将文件发送到服务器。

var formData = new FormData();
formData.append("image", input.files[0]);
request.send(formData);

但是你需要服务器上的逻辑来读取文件并保存它。想想如果我们可以随意将任何文件推送到任何服务器会发生什么。

Answer 2

解决这个问题的一种方法是使用FileReader（），这段代码会产生base64的图像。

var input = document.querySelector('input[type=file]');
    input.onchange = function(e) {
      var reader = new FileReader();
          reader.onload = function(e) {
             console.log(this.result);
          }
          reader.readAsDataURL(e.target.files[0]);
    }

<input type="file"/>

使用AJAX和普通旧javascript上传图片

2 个答案: