上傳前在客戶端查看從文件系統中選擇的圖像？

我在表單上有一個輸入標籤，用於選擇要上傳的圖像。上傳前在客戶端查看從文件系統中選擇的圖像？

<div id="lowresDemo"> 
    <img src="some-url" /> 
</div> 
<input type="file" id="FileToUpload" name="FileToUpload" />

我試圖改變表單上顯示的縮略圖的輸入旁邊的肯定，以他們的選擇是預期與下面的jQuery代碼的用戶：

$('#FileToUpload').change(function() { 
    $('#lowresDemo img').attr('src', $(this).val()); 
});

.. 。這在任何瀏覽器中都不起作用，出於瀏覽器安全方面的原因（我記得自上次做類似於這些年前的事情時）。

問題：
有沒有向用戶呈現的選擇圖像的他們提交表單前一種方式 - 而不是在輸入字段中的值的只是文件路徑+名稱，但縮略圖顯示文件，他們已選擇？

或者，現代瀏覽器安全防範呢？

來源

2011-06-06 Faust

有可能使用文件API（IE不支持文件API）

<input type="file"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("input").change(function(e) { 

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 
     var file = e.originalEvent.srcElement.files[i]; 

     var img = document.createElement("img"); 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      img.src = reader.result; 
     } 
     reader.readAsDataURL(file); 
     $("input").after(img); 
    } 
}); 
    }); 
</script>

工作例如：http://jsfiddle.net/ugPDx/

來源

2011-06-06 10:47:05 Peeter

小提琴不適合我，它不顯示圖像 – 2012-02-29 03:19:53

固定的，使用後附加的圖像添加到輸入字段，使其不可見。 – Peeter 2012-02-29 14:50:29

這似乎只適用於Chrome，在IE和Firefox 15中失敗。 – Liam 2012-09-24 12:21:26

上傳圖片前無法執行操作。

但用另一種方式思考 - 如果圖片已經上傳，用戶「不會在意」 - 您可以在上傳後顯示縮略圖，並顯示確認複選框。 Gmail使用他們的電子郵件附件執行此操作 - 只要您選擇要附加的文件，就會開始上傳。但用戶始終可以選擇取消選中該文件，並且不會將其包含在電子郵件中。

來源

2011-06-06 10:39:54 Chii

編輯：@ Peeter的HTML5文件API（http://www.w3.org/TR/FileAPI /）非常有趣。太糟糕了，沒有跨瀏覽器支持。 – Chii 2011-06-06 13:01:05

上傳前在客戶端查看從文件系統中選擇的圖像？

回答

相關問題