值得学习的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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
UI Events 用户界面事件
Jun 27 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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安全配置方法
2007/06/16 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
金融专业个人求职信
2013/09/22 职场文书
大班亲子运动会方案
2014/06/10 职场文书
踏青活动策划方案
2014/08/19 职场文书
规范化管理年活动总结
2014/08/29 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
幼师大班个人总结
2015/02/13 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
亮剑观后感500字
2015/06/05 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP