html如何引用輸入標記中的文件

假設我有一個帶有<input type="file">標記的簡單表單，我想要做的是，一旦用戶選擇了一個文件，我想顯示該文件（它是一個img）在同一頁面上查看。更好的用戶體驗。html如何引用輸入標記中的文件

試圖設置基於onChange事件的值，然後意識到這是行不通的。

有什麼想法？

來源

2011-05-12 boots

如何刪除一些代碼？ – 2011-05-12 05:41:15

您無法從瀏覽器沙箱訪問客戶端的文件系統。它違背了瀏覽器的安全模型。您只需等待用戶上傳文件，然後才能顯示它。

來源

2011-05-12 05:42:06 Asaph

查看我的帖子中許多網站使用的解決方案。 – 2011-05-12 06:33:00

這是一個巧妙的技巧，但基本上是我說的一個變化，即文件必須先上傳到服務器才能顯示在頁面上。你能舉出一個使用這種技術的網站的例子嗎？ – Asaph 2011-05-12 06:36:50

請參閱Gmail中的聯繫人示例。當您選擇圖像時，它會立即顯示。你可以找到很多其他的例子。抱歉現在不能記得任何其他。 – 2011-05-12 06:40:40

要做到這一點的唯一方法是捕捉onChange事件並使用Ajax（異步）上傳文件。

提示：在onChange事件上提交表單並將發佈數據發送到服務器端腳本。

這項技術被很多網站使用，雖然如果客戶端連接速度慢，文件很大，會很慢。祝你好運！

來源

2011-05-12 06:32:01

您不需要需要上傳圖像，然後才能顯示它。這裏有一個JQuery代碼片段：

$('input:file').change(function(){ 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = (function(event) { 
    $('#previewImage').attr('src',event.target.result); 
    }); 
    reader.readAsDataURL(file); 
});

來源

2011-09-19 00:18:16 RAMilewski

html如何引用輸入標記中的文件

回答

相關問題