html選中圖片時,在頁面回寫圖片


我們經常會遇到這種情況,就是上傳一個圖片,但是點擊一個圖片的時候,最好是可以在瀏覽器預覽這個圖片,不然用戶還以為沒有選擇圖片呢,但是瀏覽器的安全機制卻阻止了這個問題,就是當訪問的是網絡上的網站的時候,是不可以直接訪問本地的文件的,因為這樣子那豈不是人家寫一個網站,就可以獲得所有登陸這個網站人的一些資料了,尋么我們就可以通過其它的方式來操作,下面給出一些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="上傳圖片">

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM