本文實例講述了JavaScript實現圖片本地預覽功能。分享給大家供大家參考，具體如下：

實現一個在file文件域中選定圖片文件之后，馬上進行預覽。不用預上傳到服務器，整縮略圖再打回前端用Ajax去預覽的。直接利用JavaScript即可以完成，而且還可以兼容IE6。具體效果，如下圖所示：

具體實現是在非IE瀏覽器利用HTML5去顯示，在IE瀏覽器則直接調用IE的濾鏡功能去實現。具體代碼如下：

首先在preview這個放圖片預覽的p中生成一個id=imghead的p。

非IE部分，用HTML5直接可以讀取用戶選擇的文件，通過function clacImgZoomParam(maxWidth, maxHeight, width, height)計算出預覽圖片的大小，之后直接可以將這張圖片放到id=imghead這個p中。如果是IE，生成的id=imghead的p會被賦予在style標簽設置好的濾鏡，通過濾鏡將用戶選擇的圖片文件加載上去，再用clacImgZoomParam函數求其大小，得到大小之后，清除preview中的所有內容，正式生成被賦予圖片濾鏡，其大小確定的p上去。

在<input type="file">文件域也用到accept="image/*"這個HTML5功能用來限制用戶只能選擇圖片文件，但是，在提交表單的時候，還應該通過onSubmit判斷，同時更應該在服務器后臺判斷，防止用戶送些奇奇怪怪的東西到服務器。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com