JS簡(jiǎn)單實(shí)現(xiàn)文件上傳實(shí)例代碼（無需插件）
更新時(shí)間：2013年11月15日 09:23:16 作者：
注意一下：在chrome瀏覽器下，為了數(shù)據(jù)安全，隱藏的input：file不能trigger “click” 事件。 所以要設(shè)置input：file的透明度達(dá)到隱藏的效果
復(fù)制代碼 代碼如下:
<span class="up-btn" id="selectFile">請(qǐng)選擇文件</span>
<input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" />
// 點(diǎn)擊#selectFile觸發(fā)input:file的click事件
復(fù)制代碼 代碼如下:
jQuery('#selectFile').live('click',function(){
var ie = !-[1,];
if(ie){
jQuery('input:file').trigger('click').trigger('change');
}else{
jQuery('input:file').trigger('click');
}
});
選中文件要觸發(fā)的事件
復(fù)制代碼 代碼如下:
jQuery('input:file').change(function(){
//dosomthing
});
注意事項(xiàng)：
1、在chrome瀏覽器下，為了數(shù)據(jù)安全，隱藏的input：file不能trigger “click” 事件。 所以要設(shè)置input：file的透明度達(dá)到隱藏的效果。
2、在ie6,7下input file文件不支持onchange事件，所以在此瀏覽器下我還是用<input type="file" value="" />
您可能感興趣的文章:
- js 實(shí)現(xiàn) input type="file" 文件上傳示例代碼
- JS文件上傳神器bootstrap fileinput詳解
- 原生JS實(shí)現(xiàn)前端本地文件上傳
- 原生JS和jQuery版實(shí)現(xiàn)文件上傳功能
- 學(xué)習(xí)使用AngularJS文件上傳控件
- ajaxFileUpload.js插件支持多文件上傳的方法
- 分享5個(gè)好用的javascript文件上傳插件
- SpringBoot+Vue.js實(shí)現(xiàn)前后端分離的文件上傳功能
- 基于HTML5+js+Java實(shí)現(xiàn)單文件文件上傳到服務(wù)器功能
- 原生JS實(shí)現(xiàn)文件上傳
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序支付的PHP實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript獲取word的內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
微信小程序picker表單選擇器的使用,根據(jù)官方介紹的有點(diǎn)不清楚,下面這篇文章主要給大家介紹了關(guān)于微信小程序選擇器組件picker的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
JavaScript中在光標(biāo)處插入添加文本標(biāo)簽節(jié)點(diǎn)的詳細(xì)方法
本文主要介紹了JavaScript中在光標(biāo)處插入添加文本標(biāo)簽節(jié)點(diǎn)的詳細(xì)方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
XHTML-Strict 內(nèi)允許出現(xiàn)的標(biāo)簽
XHTML-Strict 內(nèi)允許出現(xiàn)的標(biāo)簽...2006-12-12
通過js動(dòng)態(tài)創(chuàng)建標(biāo)簽,并設(shè)置屬性方法
下面小編就為大家分享一篇通過js動(dòng)態(tài)創(chuàng)建標(biāo)簽，并設(shè)置屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
