BootStrap Fileinput上传插件使用实例代码

 更新时间:2017年07月28日 11:06:21   作者:Mr-Wanter  
这篇文章主要介绍了BootStrap Fileinput上传插件使用实例代码,,通过引入js和css文件,具体实现代码大家参考下本文

0、效果图

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、回调方法

var List = new Array();//声明保存上传文件路径数组对象 
  //上传 - 删除 
  $('#uploaddoc').on('filesuccessremove', function (event, key) { 
    var abort = true; 
    if (confirm("确定要删除已上传的文件吗?")) { 
      abort = false; 
    } 
    var index1; 
    $.each(List, function (index, item) { 
      if (item.KeyID == key) {//默认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();//清空保存的文件路径数组对象,这里是赋值给新的空对象,应该可以优化为删除以保存的所有值 
    $("#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); 
  }); 

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、缺点

尚未研究预览功能

尚有优化空间

7、说明

代码粘贴后可直接使用,后台框架为.net mvc5,默认母版页有加载bootstrap样式和js 如无样式请添加对bootstrap的脚本

引用

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

上网查了好多相关资料 都不完整,最后只有这个api可以看了,最后终于找到左上角关闭按钮的回调事件

总结

以上所述是小编给大家介绍的BootStrap Fileinput上传插件使用实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript简单实现滑动菜单效果的方法

    javascript简单实现滑动菜单效果的方法

    这篇文章主要介绍了javascript简单实现滑动菜单效果的方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript中的私有成员

    JavaScript中的私有成员

    JavaScript中的私有成员...
    2006-09-09
  • 微信小程序实现吸顶盒效果

    微信小程序实现吸顶盒效果

    这篇文章主要为大家详细介绍了微信小程序实现吸顶盒效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JavaScript中创建对象的7种模式详解

    JavaScript中创建对象的7种模式详解

    本文主要介绍了JavaScript中创建对象的7种模式,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 解决微信二次分享不显示摘要和图片的问题

    解决微信二次分享不显示摘要和图片的问题

    下面小编就为大家带来一篇解决微信二次分享不显示摘要和图片的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js判断文本框剩余可输入字数的方法

    js判断文本框剩余可输入字数的方法

    这篇文章主要介绍了js判断文本框剩余可输入字数的方法,可实现直观显示文本框可输入字数的功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    这篇文章主要介绍了JavaScript实现跨浏览器的添加及删除事件绑定函数,采用纯javascript实现jquery的bind及unbind添加与删除事件绑定的技巧,具有很好的浏览器兼容性,需要的朋友可以参考下
    2015-08-08
  • js实现遮罩层弹出框的方法

    js实现遮罩层弹出框的方法

    这篇文章主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义、按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • JS判断是否长按某一键的方法

    JS判断是否长按某一键的方法

    这篇文章主要介绍了JS判断是否长按某一键的方法,涉及JavaScript针对键盘按键的判断及响应操作技巧,需要的朋友可以参考下
    2016-03-03
  • 一文详解axios四种传参方式及后端接参

    一文详解axios四种传参方式及后端接参

    在开发的过程中,我们会经常使用到axios进行数据的交互,这篇文章主要给大家介绍了关于axios四种传参方式及后端接参的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-10-10

最新评论