瞭解<INPUT TYPE =「文件」>

我想圍繞我的頭，並在網站中使用所選圖像。瞭解<INPUT TYPE =「文件」>

比方說，我有一個簡單的網站，讓用戶使用他們的系統中選擇一個圖像：

<input type="file" id="userImage">

然後在JavaScript我能做到這一點，以獲得文件：

var userImage = document.getElementById('#userImage').files[0];

問題：

1）可我現在用userImage？比如將其繪製在畫布上，還是需要首先將其上傳到網站服務器？

2）如果我使用的圖像，該網站是否具有上傳它的每次我使用它，或者它留在記憶？

3）我怎麼知道什麼時候該圖像是準備使用？（出於同樣的原因所有圖像應在之前繪製在畫布上開始預加載）

非常感謝您的幫助:)

後續

謝謝您的回答。所以它看起來可能在html5中，但尚未得到普遍支持。

來源

2012-08-24 Jamie Fearon

在HTML4中，這是不可能的，但在HTML5中，您應該可以使用W3 File API訪問本地文件。但是，我不確定何時（以及如何）它將由不同的瀏覽器支持。在我的本地的Firefox 14.0.1，下面的代碼工作，併產生所選文件的二進制數據：

var reader = new FileReader() 
reader.readAsDataURL(document.getElementById('userImage').files[0]) 
alert(reader.result)

下頁描繪了本地圖像到畫布上：

<html> 
    <body> 
    <script type="text/javascript"> 
     function doIt() { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var img = new Image(); 
      img.src = e.target.result; 
      var c = document.getElementById("canvas"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img,10,10); 
      } 
     ); 
     reader.readAsDataURL(document.getElementById('userImage').files[0]); 
     } 
    </script> 

    <input type="file" id="userImage" /> 
    <button onclick="doIt()">Render Image</button><br/> 
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/> 
    </body> 
</html>

也許你應該考慮閱讀2。

來源

2012-08-24 10:29:35 tbl

謝謝您的回答沒有任何支持。所以它看起來可能在html5中，但尚未得到普遍支持。 –

+1 - 良好的解決方案和代碼 – techfoobar

您可以在http://caniuse.com/#feat=filereader找到有關FileReader API支持的最新信息。 – garethm

-3

1）您不能打開或修改圖像，因爲客戶端腳本在瀏覽器沙盒中執行。如果腳本可以訪問文件系統或用戶文件這將是一個安全問題

2）不，瀏覽器將文件發送自己的塊逐塊到遠程服務器

3）請參閱第1項:)

來源

2012-08-24 10:15:19 ruX

對於誰downvote這個答案的人：在這些時間有來自客戶端的訪問文件 – ruX

瞭解<INPUT TYPE =「文件」>

回答

相關問題