值得学习的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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 禁止函数修改列表的实现方法
2017/08/03 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
如何使用python切换hosts文件
2020/04/29 Python
小学科学教学反思
2014/01/26 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
小学生家长寄语
2014/04/02 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
验房委托书
2014/08/30 职场文书
企业委托书范本
2014/09/13 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
升学宴祝酒词
2015/08/11 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL