bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳

更新時(shí)間：2016年11月08日 11:01:40 作者：SinoCome

這篇文章主要介紹了bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳,bootstrap fileinput插件對(duì)多種類型的文件提供文件預(yù)覽，并且提供了多選等功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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:

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: