值得学习的bootstrap fileinput文件上传工具


Posted in Javascript onNovember 08, 2016

这是我上传的第二个plugin,首先第一点就是因为这个好看,符合bootstrap的界面风格,第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百度了很久才找到,CSDN上面也问了,不知道是自己百度的方式不正确还是别的什么原因..好吧

地址

http://plugins.krajee.com/file-input

https://github.com/kartik-v/bootstrap-fileinput

效果图

这里以我一个项目的新建产品为例 是基于MVC框架的 样子是不是很好看

上传之前

值得学习的bootstrap fileinput文件上传工具

选中图片的效果

值得学习的bootstrap fileinput文件上传工具

上传完成之后

值得学习的bootstrap fileinput文件上传工具

如何使用

引入文件

css fileinput.cs

js fileinput.js、fileinput_locale_zh.js(汉化包)

代码

html:

accept为需要控制的文件格式

 <input id="imgUpload" type="file" class="file-loading" accept="image/*">

js:

language: 'zh'完成汉化 默认为英文,autoReplace允许替换 maxFileCount:1 这里说明一下 我做的是上传单个的 如果需要批量上传的 可以修改这两个参数 allowedFileExtensions: ["jpg", "png", "gif"]就是验证你上传文件的格式 这里是图片文件 previewFileIcon 是设置按钮样式 bootstrap提供了几种按钮颜色 以及大量的ICON

.on("fileuploaded", function (e, data) {...} }) 这个就是我卡很久的地方了 先是不知道通过fileuploaded接收 然后是controller里的json不知道哪里取 这里是在data.response中有你return的json

$("#imgUpload")
 .fileinput({
 language: 'zh',
 uploadUrl: "/Product/imgDeal",
 autoReplace: true,
 maxFileCount: 1,
 allowedFileExtensions: ["jpg", "png", "gif"],
 browseClass: "btn btn-primary", //按钮样式 
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
 })
 .on("fileuploaded", function (e, data) {
 var res = data.response;
 if (res.state > 0) {
  alert('上传成功');
  alert(res.path);
 }
 else {
  alert('上传失败')
 }
 })

Controller:

这里没什么可说的,写的都很明确了。

[HttpPost]
 public ActionResult imgDeal()
 {
  uploadImages img = new uploadImages();
  var image = Request.Files;
  if (image != null && image.Count > 0)
  {
  string savePath = "../Uploads/";
  var _image = image[0];
  string _imageExt = System.IO.Path.GetExtension(_image.FileName).ToLower();
  string _imageName = DateTime.Now.ToString("yyyyMMddhhmmss") + _imageExt;
  //保存
  _image.SaveAs(Server.MapPath(savePath + _imageName));

  img.state = 1;
  img.name = _imageName;
  img.path = savePath + _imageName;
  }
  else
  {
  img.state = 0;
  }

  return Json(img);
 }

这样就OK了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
BootStrap table使用方法分析
Nov 08 #Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 #Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 #Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
AngularJS压缩JS技巧分析
Nov 08 #Javascript
You might like
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
移动节点的jquery代码
2014/01/13 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python实现字符串格式化的方法小结
2017/02/20 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
接口可以包含哪些成员
2012/09/30 面试题
上级检查欢迎词
2014/01/18 职场文书
运动会获奖感言
2014/02/11 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
奖金申请报告模板
2015/05/15 职场文书
未婚证明范本
2015/06/15 职场文书