BootStrap使用file-input插件上传图片的方法


Posted in Javascript onSeptember 05, 2016

最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法

首先根据自己的项目路径引入插件css和js文件

注意locale语言文件在fileinput.min.js文件之后引入

<!-- file input --> 
<link href="../../css/fileinput.min.css" rel="stylesheet"> 
<script src="../../js/fileinput.min.js"></script> 
<script src="../../js/locales/zh.js" type="text/javascript"></script>

然后是html代码 因为我不是专业前端 所以前端代码写的很烂 轻喷敲打

<!-- 模态框(Modal) --> 
<span style="white-space:pre"> </span><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<span style="white-space:pre"> </span><div class="modal-dialog"> 
<span style="white-space:pre"> </span><div class="modal-content"> 
<span style="white-space:pre"> </span><div class="modal-header"> 
<span style="white-space:pre"> </span><button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
<span style="white-space:pre"> </span>× 
<span style="white-space:pre"> </span></button> 
<span style="white-space:pre"> </span><h3 class="modal-title" id="myModalLabel" align="center"> 
<span style="white-space:pre"> </span><b>新增曲谱信息</b> 
<span style="white-space:pre"> </span></h3> 
<span style="white-space:pre"> </span></div> 
<span style="white-space:pre"> </span><div class="modal-body"> 
<span style="white-space:pre"> </span><form id="addForm" class="bs-example bs-example-form" role="form" enctype="multipart/form-data"> 
<span style="white-space:pre"> </span> <div class="input-group" style="width: 566px;"> 
<span style="white-space:pre"> </span> <span class="input-group-addon">曲谱名称</span> 
<span style="white-space:pre"> </span> <input type="text" id="scoreName" name="scoreName" class="form-control" placeholder=""> 
<span style="white-space:pre"> </span> </div> 
<span style="white-space:pre"> </span> <div class="input-group col-lg-5" style="display: inline-table; margin-top: 10px;"> 
<span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span class="input-group-addon">曲谱类型</span> 
<span style="white-space:pre"> </span> <input type="text" id="type" name="type" class="form-control"> <span style="white-space:pre"> </span> 
<span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> 
<span style="white-space:pre"> </span> <div class="input-group col-lg-5" style="display: inline-table; margin-top: 10px;margin-left: 90px;"> 
<span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span class="input-group-addon">曲谱难度</span> 
<span style="white-space:pre"> </span> <input type="text" id="difficulty" name="difficulty" class="form-control"> <span style="white-space:pre"> </span> 
<span style="white-space:pre"> </span> </div> 
<span style="white-space:pre"> </span> <div class="input-group col-lg-5" style="margin-top: 10px;"> 
<span style="white-space:pre"> </span> <span class="input-group-addon">曲调</span> 
<span style="white-space:pre"> </span> <input type="text" id="tune" name="tune" class="form-control"> 
<span style="white-space:pre"> </span> </div> 
<span style="white-space:pre"> </span> <div class="input-group" style="width: 566px; margin-top: 10px;"> 
<span style="white-space:pre"> </span><input id="fileup" type="file" class="file"/> 
<span style="white-space:pre"> </span> </div> 
<span style="white-space:pre"> </span></form> 
<span style="white-space:pre"> </span></div> 
<span style="white-space:pre"> </span><div class="modal-footer"> 
<span style="white-space:pre"> </span><button type="button" class="btn btn-default" data-dismiss="modal">关闭 
<span style="white-space:pre"> </span></button> 
<span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span><button type="button" class="btn btn-primary" onclick="addScores()"> 
<span style="white-space:pre"> </span>提交 
<span style="white-space:pre"> </span></button> --> 
<span style="white-space:pre"> </span></div> 
<span style="white-space:pre"> </span></div><!-- /.modal-content --> 
<span style="white-space:pre"> </span></div><!-- /.modal --> 
<span style="white-space:pre"> </span></div>

然后是js代码 初始化file-input

//初始化fileinput控件(第一次初始化) 
function initFileInput(ctrlName, uploadUrl) { 
var control = $('#' + ctrlName); 
control.fileinput({ 
language: 'zh', //设置语言 
uploadUrl: uploadUrl, //上传的地址 
allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀 
showUpload: true, //是否显示上传按钮 
showCaption: false,//是否显示标题 
browseClass: "btn btn-primary", //按钮样式 
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
uploadAsync: false, 
uploadExtraData:function (previewId, index) { 
var obj = {}; 
$('#addForm').find('input').each(function() { 
var id = $(this).attr('id'), val = $(this).val(); 
obj[id] = val; 
}); 
return obj; 
} 
}); 
} 
//初始化fileinput 
initFileInput("fileup", http://localhost:8080/web/guita/addGuitaInfo.action);

这段代码是插件的核心了

upLoadUrl是后台给的访问路径了

这里特别要注意的是这一段

uploadExtraData:function (previewId, index) { 
var obj = {}; 
$('#addForm').find('input').each(function() { 
var id = $(this).attr('id'), val = $(this).val(); 
obj[id] = val; 
}); 
return obj; 
}

这一段代码uploadExtraData适用于传额外参数是 可以用于提交form表单的其他input框数据

uploadExtraData:{ 
type:"type", 
tune:"tune" 
}

一般的静态数据如上图提交 后台就可以直接接到了 但是这样写会得不到动态数据 数据只会在初始化的时候生成一次 之后不会改变
这个问题纠结了我不少时间 最后是在git上面看外国朋友们的讨论 然后参考api才解决掉

BootStrap使用file-input插件上传图片的方法

这些写好之后就可以看到效果图了

BootStrap使用file-input插件上传图片的方法

样式还是很不错的 点击上传之后 整个from的数据都会提交到后台

在网上找的很多该插件的应用整合的都是php 我是用java写的这里也上一下后台接收的代码 springmvc框架接收数据还是很方便的

BootStrap使用file-input插件上传图片的方法

BootStrap使用file-input插件上传图片的方法

这样就完成了数据参数和图片参数的传递了 然后后台调用文件上传的代码存入图片即可

该插件该有很多值得研究的用法 这里只是简单的说一下使用方式并完成动态数据的传输 刚刚接触这个插件的朋友们可以稍微做一下参考。

关于BootStrap使用file-input插件上传图片的方法的相关知识就给大家介绍这么多,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
js实现简单锁屏功能实例
May 27 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 #Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 #Javascript
Vue.js每天必学之表单控件绑定
Sep 05 #Javascript
深入分析node.js的异步API和其局限性
Sep 05 #Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 #Javascript
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
PHP 实现重载
2021/03/09 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
汽车专业毕业生自荐信
2013/11/03 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
鉴定评语大全
2014/05/05 职场文书
护士求职信
2014/07/05 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
升职自荐信范文
2015/03/27 职场文书
员工担保书范本
2015/09/22 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Django操作cookie的实现
2021/05/26 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
MySQL学习必备条件查询数据
2022/03/25 MySQL
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS