bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
bootstrap fileinput文件上傳插件功能如此強(qiáng)大,樣式非常美觀,并且支持上傳文件預(yù)覽,ajax同步或異步上傳,拖曳文件上傳等炫酷的功能,完全沒有理由不去使用,
JS引用:
<script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script> <link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" /> <script src="~/Scripts/lib/jquery.json.js"></script>
HTML:
<input id="fileUpload" type="file" >
JS:
//自動(dòng)上傳文件-JS function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //設(shè)置語言 uploadUrl: uploadUrl, //上傳的地址 (該方法需返回JSON字符串) allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后綴 showUpload: false, //是否顯示上傳按鈕 showCaption: true,//是否顯示標(biāo)題 browseClass: "btn btn-primary", //按鈕樣式 //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", uploadExtraData: { ID: "123" } }).on('filebatchselected', function (event, data, id, index) { $(this).fileinput("upload"); }).on("fileuploaded", function (event, data) { if (data.response) { //通過 data.response.Json對(duì)象屬性 獲得返回?cái)?shù)據(jù) errors = data.response.ErrorList; } }) } //上傳JS初始化 $(function () { initFileInput("fileUpload", "Controllers/Action"); }); //獲取上傳文件彈窗關(guān)閉動(dòng)作 $("#fileUpload").change(function () { alert("上傳文件彈窗已關(guān)閉") })
參考資料:bootstrap上傳插件fileinput自動(dòng)上傳&成功回調(diào)
bootstrap上傳插件fileinput功能非常強(qiáng)大,本文給出一例自動(dòng)上傳&上傳成功回調(diào)的用例.核心就是調(diào)用 filebatchselected 文件選擇完成事件實(shí)現(xiàn)的,文件上傳成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .
<script> $("#update_csv").fileinput({ showUpload: false, language:'zh', uploadAsync:true, dropZoneEnabled:false, uploadUrl:'http://www.soyiyuan.com/', maxFileCount: 1, maxImageWidth: 600, resizeImage: false, showCaption: false, showPreview: false, browseClass: "btn btn-primary btn-lg", allowedFileExtensions : ['csv', 'txt'], previewFileIcon: "" }).on("filebatchselected", function(event, files) { $(this).fileinput("upload"); }) .on("fileuploaded", function(event, data) { if(data.response) { alert('處理成功'); } }); </script>
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap Fileinput文件上傳組件用法詳解
- JS文件上傳神器bootstrap fileinput詳解
- Bootstrap fileinput文件上傳預(yù)覽插件使用詳解
- Bootstrap中的fileinput 多圖片上傳及編輯功能
- Bootstrap的fileinput插件實(shí)現(xiàn)多文件上傳的方法
- 基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- 詳解bootstrap-fileinput文件上傳控件的親身實(shí)踐
- Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
- BootStrap fileinput.js文件上傳組件實(shí)例代碼
- Bootstrap FileInput實(shí)現(xiàn)圖片上傳功能
相關(guān)文章
JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問題
這篇文章主要介紹了JavaScript代碼因逗號(hào)不規(guī)范導(dǎo)致IE不兼容的問題的相關(guān)資料,需要的朋友可以參考下2016-02-02JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解
對(duì)象的constructor屬性用于返回創(chuàng)建該對(duì)象的函數(shù),也就是我們常說的構(gòu)造函數(shù),除了創(chuàng)建對(duì)象,構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動(dòng)為創(chuàng)建的新對(duì)象設(shè)置了原型對(duì)象(prototype object)2015-11-11JS把字符串轉(zhuǎn)成json對(duì)象的三種方法示例詳解
這篇文章主要介紹了js?把字符串轉(zhuǎn)成json對(duì)象的三種方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04window.onload綁定多個(gè)事件的兩種解決方案
這篇文章主要介紹了window.onload綁定多個(gè)事件的兩種解決方案的相關(guān)資料,需要的朋友可以參考下2016-05-05關(guān)于javascript原型的修改與重寫(覆蓋)差別詳解
下面小編就為大家?guī)硪黄P(guān)于javascript原型的修改與重寫(覆蓋)差別詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JavaScript中的undefined學(xué)習(xí)總結(jié)
這篇文章主要是對(duì)JavaScript中的undefined進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11如何基于webRTC實(shí)現(xiàn)人臉識(shí)別功能
WebRTC技術(shù)包含了音視頻編解碼技術(shù)、傳輸技術(shù)、流媒體服務(wù)器技術(shù)等,涵蓋了音視頻處理和傳輸?shù)姆椒矫婷?下面這篇文章主要給大家介紹了關(guān)于如何基于webRTC實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下2022-12-12