通過JQuery AJAX上傳圖像

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.")
    })

服務器端（並且我將Node與Express一起使用，因此這可能不適用），我可以將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處理處理。 對於它的價值，我希望這可以在某種程度上幫助您！