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 引发两次$(document.ready)事件
Jan 15 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
2.PHP入门
2006/10/09 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Django 多环境配置详解
2019/05/14 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
数据员岗位职责
2013/11/19 职场文书
教导处工作制度
2014/01/18 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
小学生寒假家长评语
2014/04/16 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2015年教师业务工作总结
2015/05/26 职场文书