JQ圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例(分享)
更新時(shí)間：2017年11月12日 11:01:49 作者：往事已成風(fēng)
下面小編就為大家?guī)硪黄狫Q圖片文件上傳之前預(yù)覽功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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)文章
jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jQuery遍歷json的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)json格式數(shù)據(jù)的遍歷操作相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回?cái)?shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
jQuery的bind的函數(shù)在實(shí)際應(yīng)用其實(shí)不是特別多，只是他可以綁定一個(gè)事件，但不會(huì)即時(shí)觸發(fā)，也可以通過unbind來解除綁定。2011-04-04
jQuery實(shí)現(xiàn)Ajax功能分析【與Flask后臺(tái)交互】
這篇文章主要介紹了jQuery實(shí)現(xiàn)Ajax功能,結(jié)合實(shí)例形式分析了jQuery ajax功能實(shí)現(xiàn)方法以及與Flask后臺(tái)進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼,可實(shí)現(xiàn)實(shí)時(shí)顯示評(píng)論效果的功能,基于Ajax實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery插件 tabBox實(shí)現(xiàn)代碼
最近對(duì)js以及jq產(chǎn)生了濃厚的興趣，看到j(luò)q有很多很好用的插件，功能各異，包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。2010-02-02
分享2個(gè)jQuery插件--jquery.fileupload與artdialog
這篇文章主要介紹了分享2個(gè)jQuery插件--jquery.fileupload與artdialog的使用方法及示例，非常的實(shí)用，這里推薦給大家。
2014-12-12