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 年会抽奖程序
Dec 22 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
vue实现图片懒加载的方法分析
Feb 05 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
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
django上传图片并生成缩略图方法示例
2017/12/11 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
教学器材管理制度
2014/01/26 职场文书
说明书格式及范文
2014/05/07 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
小学科学教学计划
2015/01/21 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
DSP接收机前端设想
2022/04/05 无线电