javascript預覽圖片——IT輪子系列（九）

標籤：var   gpo   需要   選擇   檔案   att   file   問題   idt   

再使用htm控制項

<input type="file" name="file" />

上傳圖片的時候，往往需要先預覽圖片，然後點擊儲存按鈕，把圖片上傳到伺服器。今天正好解決了這樣一個問題，記錄博文，以備後用。

html 代碼

<div>    <input type="file" id="filePreview" /><br />    <img id="imgPhoto" style="width:50px;height:50px;" /></div>

js 代碼

        $("#filePreview").on("change", function () {            var url = $(this).val();            if (url.length == 0) {                alert("請選擇檔案");                return;            }            //判斷副檔名（待todo）            var file = document.getElementById("filePreview");            var windowURL = window.URL || window.webkitURL;            var src = windowURL.createObjectURL(file.files[0]);//第一個檔案，若是多檔案上傳，需迴圈                        $("#imgPhoto").attr("src", src);//修改圖片控制項的src屬性        });

效果

 

javascript預覽圖片——IT輪子系列（九）