值得学习的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 相关文章推荐
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jquery 使用简明教程
Mar 05 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
vue设置一开始进入的页面教程
Oct 28 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
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php SQL之where语句生成器
2009/03/24 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python中MySQLdb模块用法实例
2014/11/10 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
2014年社区庆元旦活动方案
2014/03/08 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers