JS在上傳之前使用上傳的圖像

我正嘗試使用用戶在上載字段真正上傳服務器端之前選擇的圖像。具體來說，我想讓用戶在實際上傳它之前用一些jquery插件操作圖像（裁剪，閃電等）。JS在上傳之前使用上傳的圖像

我沒有與JS這麼多的經驗，所以到目前爲止，我結束了這段代碼：

$(".image_upload_form").submit(function (e) { 
    "use strict"; 
    e.preventDefault(); 
    var input, files, reader; 
    input = $("#id_image"); 
    files = input[0].files; 
    if (files && files[0]) { 
     reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#img_view').attr('src', e.target.result); 
     }; 
     reader.readAsDataURL(files[0]); 
    } 
});

工作正常，圖像顯示在"#img_view"提交表單後。但是我需要將reader.onload函數中的"e.target.result"變成一個變量，所以我可以在後面的代碼中使用它。我怎樣才能做到這一點？

來源

2012-12-28 SnirD

好，你必須有一個臨時存儲這樣做，首先用戶選擇圖像，然後您將其存儲到服務器上的某個臨時存儲中，在用戶完成操作映像後，則需要在用戶提交表單時將其存儲在服務器數據庫中。 –

@HussainAkhtarWahid我知道，這只是我資源非常有限，所以我希望這個過程在客戶端。 – SnirD

是的，我已經給你的選擇，但多數民衆贊成在限制，不能使用IE瀏覽器，直到你使用IE10或以上，休息它的罰款 –

好，如果你正在考慮IE瀏覽器時，這將工作在所有瀏覽器，幾乎在每一個主要的瀏覽器

function selectedPhotoText(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#imagePreview') 
         .attr('src', e.target.result) 
         .width(240) 
         .height(149); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
    else { 
     $('#imagePreview').attr('src', "../../Images/blqblq.jpg"); 
    } 
} 

<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>

來源

2012-12-28 12:57:29

JS在上傳之前使用上傳的圖像

回答

相關問題