Question

我环顾四周，找不到我正在寻找的没有额外的插件/库。我想通过JQuery AJAX上传图像并在服务器端处理它，但我无法弄清楚如何传递和处理它。非常感谢任何帮助！

Answer 1

虽然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字符串转换为Buffer（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来处理处理。对于它的价值，我希望这会以某种方式帮助你！

通过JQuery AJAX上传图像

1 个答案: