通過jQuery AJAX上傳圖片

我環顧四周，找不到我要找的東西沒有附加插件/庫。我想通過JQuery AJAX上傳圖片並通過服務器端處理，但我無法弄清楚如何傳遞和處理它。任何幫助深表感謝！通過jQuery AJAX上傳圖片

來源

2013-10-09 J S

它是否必須是jQuery或AJAX？我會推薦node.js這樣的事情。 –

創建'

AJAX本身不支持二進制文件傳輸。您需要對其進行base-64編碼，在AJAX調用中將其作爲文本塊發送，在服務器上解碼並將其保存爲二進制文件。你想自己寫所有的東西 - 繼續。 –

雖然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的節點，所以這可能不適用），我可以將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-09 22:10:22

非常感謝回覆！我實際上已經在使用FileReader，所以這可能會派上用場。現在我正在嘗試一個隱藏的IFrame，它會將JavaScript變量傳遞迴父窗口來表示成功（或缺少），並且不明白爲什麼它不起作用。如果沒有，我一定會仔細看看你的解決方案。再次感謝！ –

沒問題！嗯...我應該認爲在文件輸入中使用$ .change（）事件可能是更好的方法。只有在文件上傳成功的情況下才會觸發它，並且它的功能就像是一個啓動我的應用程序的魅力。 –

通過jQuery AJAX上傳圖片

回答

相關問題