簡單實現(xiàn)JS上傳圖片預(yù)覽功能
更新時間：2017年04月14日 11:28:46 作者：daodanxiong
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)JS上傳圖片預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
js實現(xiàn)上傳圖片預(yù)覽功能思路是獲取上傳圖片本地路徑，再加載到頁面中實現(xiàn)上傳預(yù)覽
HTML代碼
<div class="upload">
<input type="button" class="btn" onclick="browerfile.click()" value="上傳">
<input type="file" id="browerfile" style="display: none;" class="test">
<div class="img_center">
<img src="" class="img1-img">
</div>
</div>
實現(xiàn)功能的js代碼
//獲取圖片路勁的方法，兼容多種瀏覽器，通過createObjectURL實現(xiàn)
function getObjectURL(file){
var url = null;
if(window.createObjectURL != undefined){
url = window.createObjectURL(file);//basic
}else if(window.URL != undefined){
url = window.URL.createObjectURL(file);
}else if(window.webkitURL != undefined){
url = window.webkitURL.createObjectURL(file);
}
return url;
}
//實現(xiàn)功能代碼
$(function(){
$("#browerfile").change(function(){
var path = browerfile.value;
var objUrl = getObjectURL(this.files[0]);
if(objUrl){
$('.img1-img').attr("src",objUrl);
}
})
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
做一個彈出dialog時用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下2014-02-02![JS實現(xiàn)留言板功能[樓層效果展示]](http://img.jbzj.com/images/xgimg/bcimg1.png)
小編最近在基于js實現(xiàn)留言板功能，實現(xiàn)的功能有發(fā)布人和發(fā)布內(nèi)容做非空校驗，樓層效果展示和發(fā)布時間展示。具體實例代碼大家參考下本文2017-12-12
JavaScript實現(xiàn)數(shù)組隨機排序的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組隨機排序的方法,涉及javascript數(shù)組遍歷與排序的相關(guān)技巧,需要的朋友可以參考下2015-06-06
沒必要一開始加載就要把全部圖片加載出來，這樣子打開網(wǎng)面的速度得到了很好提高，下面有個不錯的思路，大家可以看看2014-09-09
JavaScript 以對象為索引的關(guān)聯(lián)數(shù)組
我們常說JavaScript原生支持json，因為我們可以認為json就是對JavaScript的Object對象的靈活應(yīng)用。2010-05-05
javascript iframe內(nèi)的函數(shù)調(diào)用實現(xiàn)方法
用下面的方法可以調(diào)用iframe中的函數(shù)，實現(xiàn)一些比較特殊的效果，不過能跨域的。2009-07-07
這篇文章主要介紹了如何處理JSON中的特殊字符,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本篇文章主要是對js確認刪除對話框效果的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JavaScript截取指定長度字符串點擊可以展開全部代碼 的相關(guān)資料,需要的朋友可以參考下2015-12-12
本文介紹了jQuery擴展、私有域、定義插件的基本步驟等知識，有需要的朋友可以看下2016-11-11