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 相关文章推荐
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
vue 子组件和父组件传值的示例
Sep 11 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/11/16 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php生成随机数的三种方法
2014/09/10 PHP
php字符串过滤与替换小结
2015/01/26 PHP
如何使用php实现评委评分器
2015/07/31 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python实现进程同步和通信的方法
2018/01/02 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
求职简历自荐信
2013/10/20 职场文书
法律专业实习鉴定
2013/12/22 职场文书
优质服务口号
2014/06/11 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
学生会工作感言
2015/08/07 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android