再使用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輪子系列（九）