JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例(分享)
更新時(shí)間：2017年11月12日 11:01:49 作者：往事已成風(fēng)
下面小編就為大家?guī)?lái)一篇JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1、先準(zhǔn)備一個(gè)div
onchange觸發(fā)事件
<input type="file" onchange="preview(this)" ></span> <div id="preview"></div>
2、寫JS代碼
//上傳圖片之前預(yù)覽圖片
function preview(file){
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
$("#preview").html('<img src="' + evt.target.result + '" width="95px" height="50px" />');
}
reader.readAsDataURL(file.files[0]);
}else{
$("#preview").html('<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
}
}
以上這篇JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例(分享)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在不同的瀏覽器中，一個(gè)文本框，如果只是直接給文本框設(shè)置focus()，那么光標(biāo)聚焦的位置可能是在最前面。下面的代碼則是給jquery擴(kuò)展一個(gè)textFocus方法2012-10-10
jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
項(xiàng)目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼，需要的朋友可以參考下。2011-03-03
jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單代碼,可實(shí)現(xiàn)jQuery基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Jquery 實(shí)現(xiàn)表格顏色交替變化鼠標(biāo)移過(guò)顏色變化實(shí)例
Jquery 實(shí)現(xiàn)表格顏色交替變化，點(diǎn)擊選中行，鼠標(biāo)移過(guò)顏色變化效果附演示代碼 ，喜歡的朋友可以參考下2013-08-08
JQuery防止退格鍵網(wǎng)頁(yè)后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁(yè)后退，一般情況下最好不要這么用，因?yàn)閷?duì)UX體驗(yàn)不好2012-03-03
這篇文章主要介紹了判斷瀏覽器的內(nèi)核及版本號(hào)方法匯總,需要的朋友可以參考下2015-01-01
頁(yè)面上經(jīng)常會(huì)有彈窗，有的彈窗是動(dòng)態(tài)生成的，有的彈窗是在頁(yè)面底部隱藏的，對(duì)于動(dòng)態(tài)生成的彈窗，如果要監(jiān)聽彈窗的事件，可以使用jQuery的事件綁定on()方法實(shí)現(xiàn)2016-04-04
本文匯總介紹了常見的jQuery選擇器知識(shí)，包含基本元素選擇器、分層選擇器、基本條件選擇器、內(nèi)容條件選擇器、可見性條件選擇器、屬性選擇器、子元素選擇器、表單元素選擇器、表單屬性選擇器。十分的詳盡，有需要的小伙伴參考下吧2014-11-11
jQuery的each循環(huán)用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery的each循環(huán)用法,以簡(jiǎn)單實(shí)例形式分析了jQuery中each循環(huán)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06