jquery Form輕松實現(xiàn)文件上傳
很久開始前就用這個插件了,每次都忘記具體的調用方法,特地寫個demo記錄下。
先上這個demo的傳送門,恩!然后開始了...
①先是html
<a href="javascript:void(0)" class="j_upLoadFile">上傳圖片</a> <form action="接口名字" method="post" enctype="multipart/form-data" id="submitForm"> <!-- 隨文件一起上傳的字段 --> <input type="hidden" name="type" value="temp"> <input type="file" name="pic_name" style="display: none" class="j_file"> </form>
將真正的文件上傳按鈕隱藏(因為它太丑了),自己定義個“.j_uploadFile”的觸發(fā)按鈕,到時候和form里的文件按鈕相關聯(lián)就好了。
②引入jqueryForm
<script src="libs/jquery.min.js"></script> <script src="libs/jquery.form.min.js"></script>
③重點來了
<script>
//點擊上傳圖片
$('.j_upLoadFile').click(function(){
$('.j_file').click();
});
//選擇了新文件
$('.j_file').change(function(){
//如果文件為空
if($(this).val() == ''){
return;
}
$('#submitForm').ajaxSubmit({
type:'post',
dataType:'json',
success:function(result){
//請求成功后的操作
//并且清空原文件,不然選擇相同文件不能再次傳
$('.j_file').val('');
},
error:function(){
//并且清空原文件,不然選擇相同文件不能再次傳
$('.j_file').val('');
}
});
})
</script>
點擊假的上傳按鈕記得同時觸發(fā)真正的file按鈕,當上傳按鈕的value改變值(即打開文件夾你選擇新的文件,點確定時),會觸發(fā)ajaxSubmit函數(shù),上傳整個form表單,別忘了在請求成功或失敗,都要清空file值,不然第二次選擇相同的文件,等于value沒變,不給上傳的。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- 使用jquery.form.js實現(xiàn)圖片上傳的方法
- jquery.form.js框架實現(xiàn)文件上傳功能案例解析(springmvc)
- 使用jQuery.form.js/springmvc框架實現(xiàn)文件上傳功能
- jQuery用FormData實現(xiàn)文件上傳的方法
- jQuery Ajax使用FormData對象上傳文件的方法
- jQuery.form插件的使用及跨域異步上傳文件
- Struts2+jquery.form.js實現(xiàn)圖片與文件上傳的方法
- jQuery+formdata實現(xiàn)上傳進度特效遇到的問題
- 基于jQuery通過jQuery.form.js插件實現(xiàn)異步上傳
- asp.net+jquery.form實現(xiàn)圖片異步上傳的方法(附jquery.form.js下載)
相關文章
js之ActiveX控件使用說明 new ActiveXObject()
ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動畫內容等來增加瀏覽的樂趣。不過,這些程序可能出問題或者向您提供不需要的內容2014-03-03
jQuery實現(xiàn)table表格信息的展開和縮小功能示例
這篇文章主要介紹了jQuery實現(xiàn)table表格信息的展開和縮小功能,涉及jQuery事件響應及頁面元素遍歷、屬性修改相關操作技巧,需要的朋友可以參考下2018-07-07
jQuery Datatable 多個查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個查詢條件自定義提交事件的相關資料,需要的朋友可以參考下2017-08-08
使用Jquery實現(xiàn)點擊文字后變成文本框且可修改
使用Jquery實現(xiàn)點擊文字變?yōu)槲谋究蛐Ч?,可對文本框文字進行修改,具體的實現(xiàn)思路如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-09
jquery ui dialog實現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實現(xiàn)彈窗特效的思路及代碼,有需要的朋友可以參考一下2013-08-08
Jquery仿IGoogle實現(xiàn)可拖動窗口示例代碼
這個拖動窗口是根據(jù)一個Jquery的框架直接做出來的:easywidgets,廢話就不多說了,直接把源代碼貼出來,讓大家學習2014-08-08

