預覽上傳的文件（圖片）

我有一個文件已經上傳到服務器使用input type="file"（PHP），我的問題是，我怎樣才能在我下載它之前預覽圖像。我想在每個下載文件名稱鏈接上放一個預覽按鈕。點擊預覽按鈕，它會彈出並顯示圖像。預覽上傳的文件（圖片）

有誰知道預覽圖像的編碼？感謝

2013-11-15 user2699175

http://stackoverflow.com/questions/16207575/how-to-preview-a-image-before-and-after-upload – aldanux

@positlabs是否使用相同的編碼在圖像上傳後預覽圖像？如何在顯示圖像之前從服務器檢索信息？ – user2699175

你的意思是像一個縮略圖？ – bfavaretto

您可以使用一些JavaScript/jQuery的：

function readURL(input) { 
     if (input.files) { 
      for (var i = 0; i < input.files.length; i++) { 
       if(input.files[i]) { 
        preview(input, i); 
       } 
      } 
     } 
    } 

function preview(input, i) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#divID').html('<img src="'+e.target.result+'" alt="Image currently not accessible" />'); 
    }; 

    reader.readAsDataURL(input.files[i]); 
} 

    $('input[type=file]').on('change', function() { 
     readURL(this); 
    });

和HTML部分：

<div id="divID"></div>

注意，這裏使用相當多的資源，與大型圖像。

來源

2013-11-15 01:52:11

感謝您分享，稍後再嘗試.. – user2699175

嗨，只是想知道哪部分代碼稱爲圖像路徑和文件名？它是否是'e.target.result'？ – user2699175

你好，是的，e.target.result對應的圖片來源。我們使用readURL函數來獲取正確的輸入文件，同時也因爲這個函數可以一次處理多個文件。從技術上講，你可以關聯readURL和預覽，重要的是FileReader部分。 –

預覽上傳的文件（圖片）

回答

相關問題