BootStrapFileinput上傳插件使用實例代碼

0、效果圖

成都創(chuàng)新互聯(lián)專注于吉縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。吉縣網(wǎng)站建設(shè)公司,為吉縣等地區(qū)提供建站服務(wù)。全流程按需設(shè)計網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

BootStrap Fileinput上傳插件使用實例代碼

1、引入js、css（建議css放在html頭部，js加載在html底部）

<link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" />
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/fileinput.js"></script>
<script src="~/scripts/zh.js"></script>

2、html

<input type="file" id="uploaddoc" name="file" class="file" multiple />//上傳按鈕 multiple為可多文件上傳 
<input type="hidden" id="Doc" name="doc" value="" />//保存文件路徑

3、初始化

$("#uploaddoc").fileinput({ 
    language: 'zh', 
    uploadUrl: '/Form/upload',//后臺上傳方法 
    allowedFileExtensions: ['doc', 'docx'],//上傳文件擴展名 
    shouUpload: false, 
    showRemove: false, 
    browseClass: 'btn btn-danger', 
    maxFileSize: 5000, 
    maxFileNum: 10, 
    allowedPreviewTypes: null, 
    previewFileIconSettings: { 
      'doc': '<i class="fa fa-file-word-o text-muted"></i>' 
    }, 
    previewFileExtSettings: { 
      'doc': function (ext) { 
        return ext.match(/(doc|docx)$/i); 
      } 
    } 
  });

4、回調(diào)方法

var List = new Array();//聲明保存上傳文件路徑數(shù)組對象 
  //上傳 - 刪除 
  $('#uploaddoc').on('filesuccessremove', function (event, key) { 
    var abort = true; 
    if (confirm("確定要刪除已上傳的文件嗎？")) { 
      abort = false; 
    } 
    var index1; 
    $.each(List, function (index, item) { 
      if (item.KeyID == key) {//默認(rèn)fileinput.js的key與KeyID不一致，需要改動源碼，詳情見下文 
        index1 = index; 
        $.post("/Form/uploaddelete", { key: item.KeyID, path: item.path });//刪除以上傳到本地的文件 
      } 
    }); 
    List.splice(index1, 1); 
    var path = ""; 
    $.each(List, function (index, item) { 
      path += item.path; 
    }); 
    $("#Doc").val(path);//修改保存的文件路徑 
  }); 
  //取消上傳事件，左上角的取消按鈕 
  $('#uploaddoc').on('filecleared', function (event, files) { 
    $.each(List, function (index, item) { 
      $.post("/Form/uploaddelete", { key: "all", path: item.path }); 
    }); 
    List = new Array();//清空保存的文件路徑數(shù)組對象，這里是賦值給新的空對象，應(yīng)該可以優(yōu)化為刪除以保存的所有值 
    $("#Doc").val(""); 
  }); 
 
  //上傳 - 成功 
  $("#uploaddoc").on("fileuploaded", function (event, data, previewId, index) { 
    var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader; 
    List.push({ path: response.path, KeyID: previewId }) 
    $("#Doc").val($("#Doc").val() + response.path); 
    //$("#Doc").val(List); 
  });

BootStrap Fileinput上傳插件使用實例代碼

5、后臺上傳方法

//上傳方法  
public JsonResult Upload() 
    { 
      HttpPostedFileBase file = Request.Files["file"]; 
      if (file == null) 
      { 
        return Json(new { error = "上傳異常" }); 
      } 
      var ext = Path.GetExtension(file.FileName); 
      var filename = Path.GetFileNameWithoutExtension(file.FileName); 
      var serverfilenname = Guid.NewGuid().ToString("n") + "_" + filename + ext; 
      try 
      { 
        var path = "/File"; 
        var dic = string.Format("{0}/{1}/{2}/{3}", path, DateTime.Today.Year.ToString(), DateTime.Today.Month.ToString(), DateTime.Today.Day.ToString()); 
        if (!Directory.Exists(Server.MapPath(dic))) 
        { 
          Directory.CreateDirectory(Server.MapPath(dic)); 
        } 
        var webpath = string.Format("{0}/{1}", dic, serverfilenname); 
        var serverpath = Path.Combine(Server.MapPath(dic), serverfilenname); 
        file.SaveAs(serverpath); 
        return Json(new { 
          url = "/Form/uploaddelete",//定義要刪除的action，沒有用到可刪掉 
          key = serverfilenname, 
          path = webpath }); 
      } 
      catch (Exception ex) 
      { 
        return Json(new { error = "上傳異常" + ex }); 
      } 
    } 
//刪除本地文件方法 
public JsonResult UpLoadDelete() 
    { 
      try 
      { 
        var key = Request.Params["key"]; 
        var path = Request.Params["path"]; 
        if (string.IsNullOrEmpty(key) || string.IsNullOrEmpty(path)) 
        { 
          return Json(false, JsonRequestBehavior.DenyGet); 
        } 
        path = Server.MapPath(path); 
        if (System.IO.File.Exists(path)) 
        { 
          System.IO.File.Delete(path); 
          return Json(true, JsonRequestBehavior.DenyGet); 
        } 
        else 
        { 
          return Json(false, JsonRequestBehavior.DenyGet); 
        } 
      } 
      catch (Exception) 
      { 
        return Json(false, JsonRequestBehavior.DenyGet); 
      } 
    }

6、缺點

尚未研究預(yù)覽功能

尚有優(yōu)化空間

7、說明

代碼粘貼后可直接使用，后臺框架為.net mvc5，默認(rèn)母版頁有加載bootstrap樣式和js 如無樣式請?zhí)砑訉ootstrap的腳本

引用

插件api地址：http://plugins.krajee.com/file-input#events

上網(wǎng)查了好多相關(guān)資料都不完整，最后只有這個api可以看了，最后終于找到左上角關(guān)閉按鈕的回調(diào)事件

總結(jié)

以上所述是小編給大家介紹的BootStrap Fileinput上傳插件使用實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站題目：BootStrapFileinput上傳插件使用實例代碼
轉(zhuǎn)載源于：http://www.chinadenli.net/article6/geihog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、商城網(wǎng)站、手機網(wǎng)站建設(shè)、ChatGPT、關(guān)鍵詞優(yōu)化、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

BootStrapFileinput上傳插件使用實例代碼