我們經常會遇到這種情況,就是上傳一個圖片,但是點擊一個圖片的時候,最好是可以在瀏覽器預覽這個圖片,不然用戶還以為沒有選擇圖片呢,但是瀏覽器的安全機制卻阻止了這個問題,就是當訪問的是網絡上的網站的時候,是不可以直接訪問本地的文件的,因為這樣子那豈不是人家寫一個網站,就可以獲得所有登陸這個網站人的一些資料了,尋么我們就可以通過其它的方式來操作,下面給出一些javascript代碼,不是jquery,可以直接使用的。
//定義id選擇器 function Id(id){ return document.getElementById(id); } //入口函數,兩個參數分別為<input type='file'/>的id,還有一個就是圖片的id,然后會自動根據文件id得到圖片,然后把圖片放到指定id的圖片標簽中 function changeToop(fileid,imgid){ var file = Id(fileid); if(file.value==''){ //設置默認圖片 Id("myimg").src='http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png'; }else{ preImg(fileid,imgid); } } //獲取input[file]圖片的url Important function getFileUrl(fileId) { var url; var file = Id(fileId); var agent = navigator.userAgent; if (agent.indexOf("MSIE")>=1) { url = file.value; } else if(agent.indexOf("Firefox")>0) { url = window.URL.createObjectURL(file.files.item(0)); } else if(agent.indexOf("Chrome")>0) { url = window.URL.createObjectURL(file.files.item(0)); } return url; } //讀取圖片后預覽 function preImg(fileId,imgId) { var imgPre =Id(imgId); imgPre.src = getFileUrl(fileId); }
這里的入口方法為
changeToop()
只要在這里面加兩個參數,一個是選擇文件的id,一個則是圖片的id,然后給文件input一個onchange事件,來觸發這個changeTop(),這樣就可以達到預覽圖片的效果了
<div id="preview" style="float:left"> <img id="imghead" class="logo-size" src=''/> </div> <input id="filgo" type="file" name="logo" onchange="changeToop('filgo','imghead');" value="上傳圖片">