jQuery的 - 文件上傳 - 縮略圖

我想動態顯示上傳文件的縮略圖（重新上傳後，將改變），並最終使用保存更改「保存」按鈕。

我知道如何使用timthumb等，所以調整大小不會是一個問題，但如何顯示使用jQuery「上飛」上傳的圖像？

非常感謝！

[編輯]

下面的代碼：

<form method="post" action=""> 
    <input type="file" name="datafile" size="40"> 
    <div> 
     <p>Live AJAX uploaded file thumbnail</p> 
    </div> 
    <input type="submit" value="Save this image"> 
</form>

來源

2011-01-05 anonymous

好吧，你是對的，謝謝，完成。 – anonymous 2011-01-05 10:52:13

-1

[編輯2.5年後：看到約書亞這個答案下面的評論，這似乎是可能的（現在的），如果你正在準備以犧牲舊（呃）瀏覽器的支持。]

據我所知，您的瀏覽器只能將文件上傳到服務器。因此，您的腳本在上傳之前無法訪問文件本身。

也就是說，你可以想出一個解決方案，在該解決方案中，圖像上傳到ajax-ish，服務器處理它，並向（經過剪切的）圖像提供信息（即url）回到jQuery腳本。

但是在這種情況下，'魔術'發生在服務器上，而不是jQuery中，解決方案取決於您使用的服務器端語言/技術。

來源

2011-01-05 11:18:56 Jochem

這個答案要麼不正確，要麼已經過時。隨着HTML5文件對象（IE 10，Chrome和Firefox支持）的實現，您可以從文件輸入中選擇的文件中讀取數據（無需上傳），並在DOM中顯示該數據;包括圖片縮略圖：'https：// github.com/JDBurnZ/jquery-filefive' – 2013-09-17 19:42:37

這是可能的，支持文件和的FileReader（caniuse.com）瀏覽器

Heres some examples and guides

來源

2012-03-14 08:05:03 doug

試試這個。

第一步：添加的代碼下面一行在你的文件

<form id="myform"> 
    <input type='file' onchange="showImage(this);" /> 
    <img id="imagepreview" src="" alt="your image" /> 
</form>

步驟2：在同一頁面添加下面的腳本

<script type="text/javascript"> 
function showImage(input) { 
     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
       $('#imagepreview').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>

檢查demo

來源

2014-09-23 07:39:48 Hardik

jQuery的 - 文件上傳 - 縮略圖

回答

相關問題