1

我环顾四周，没有额外的插件/库就找不到我要找的东西。我想通过 JQuery AJAX 上传图像并在服务器端处理它，但我不知道如何传递和处理它。任何帮助深表感谢！

4

1 回答 1

2

虽然 Diodeus 是正确的，但它并没有那么困难。简直让人抓狂。

HTML5 确实公开了所谓的 FileReader API，它仍然是相对较新的，在旧版浏览器上不受支持，但它会让您的工作更轻松。我有一个小应用程序，它在客户端接受图像，并使用 FileReader API 将它们转换为 base-64 以上传到服务器。

以下是我在用户上传图片时调用的函数。App.FileReader 是 HTML5 FileReader 的实例化，它的声明简单如下：

App.FileReader = window.FileReader ? new FileReader : null;

上传后，我使用 FileReader 将图像作为 dataURL 读取，并将数据推送到未使用的标签中。FileReader 本身会保留读取的数据，这就是为什么一次只实例化一个 FileReader 是个好主意。

    if (input.files && input.files[0]) {

        if (App.FileReader) {

            App.FileReader.onload = function (e) {
                $('#createMomentImagePreview').attr('src', e.target.result);
            }

            App.FileReader.readAsDataURL(input.files[0]);

            $this.uploadedImage = true
        }

        else {
            $('#createMomentImagePreview').attr('src', 'http://d33w6ffaa49e6z.cloudfront.net/media/ImageLoaded.png');

            $this.uploadedImage = true
        }
    }

这是上传到服务器的 AJAX 调用，其中数据代表读取的文件，或“App.FileReader.result”：

    $.ajax({
        url: '/image',
        type: 'POST',
        data: {
            image: App.FileReader.result
        }
    }).done(function(data){

        callback(data);

    }).fail(function() {
        console.log("Image upload failed!")
        alert("Sorry, there was an error uploading your image to the database.")
    })

在服务器端（我正在使用带有 Express 的 Node，因此这可能不适用），我可以将 base64 字符串转换为缓冲区（Blob）并使用 Knox 的 putBuffer 将其发送到 S3。这比实际使用 S3 进行身份验证并试图让它与您的二进制数据一起使用要简单得多。

if (req.body.image.match(/^data:image\/png;base64,/)) {
    var image = new Buffer(req.body.image.replace(/^data:image\/png;base64,/,""), "base64");
}

else if (req.body.image.match(/^data:image\/jpeg;base64,/)) {
    var image = new Buffer(req.body.image.replace(/^data:image\/jpeg;base64,/,""), "base64");
}

awsClient.putBuffer(image, '/' + imagePath + '.jpg', headers, function(err, stream) {

          if (err) {
            console.log(err);
            return false
          }

          res.send(200, imagePath + '.jpg')

          image = null;

        });

无论哪种情况，一旦您在服务器上拥有 base64 数据，您就取得了重大进展。您也可以使用 ImageMagick 来处理处理。对于它的价值，我希望这对您有所帮助！

于 2013-10-09T22:10:22.573 回答