bootstrap 上传图片插件 file-input 的简单使用
最近在写自己的个人网站 ,前端使用的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" οnclick="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;}}); }//初始化fileinputinitFileInput("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才解决掉
这些写好之后就可以看到效果图了
样式还是很不错的 点击上传之后 整个from的数据都会提交到后台
在网上找的很多该插件的应用整合的都是php 我是用java写的这里也上一下后台接收的代码 springmvc框架接收数据还是很方便的
这样就完成了数据参数和图片参数的传递了 然后后台调用文件上传的代码存入图片即可
该插件该有很多值得研究的用法 这里只是简单的说一下使用方式并完成动态数据的传输 刚刚接触这个插件的朋友们可以稍微做一下参考
bootstrap 上传图片插件 file-input 的简单使用相关推荐
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- （转）基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- Bootstrap文件上传插件File Input的使用
1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugin ...
- bootstrap File Input 多文件上传插件使用记录（二）删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
- Bootstrap File Input 真正 解决跨域问题
今天一个项目需要 做文件上传 ,图方便 就使用了Bootstrap File Input 插件 问题来了 文件放置服务器和 活动服务器 是分开的 于是涉及到了 一个ajax 跨域请求问题 后端使 ...
- Bootstrap File Input，最好用的文件上传组件
本篇介绍如何使用 Bootstrap File Input(最好用的文件上传组件)来进行图片的展示.上传,以及如何在服务器端进行文件保存. 一.先来看效果图吧 二.引入插件的样式和脚本 <lin ...
- php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
最新文章
- Xamarin Android 所见即所得问题
- 计算机net use命令使用,网络命令net之net use应用
- c语言低级语言分为,认识C语言 -低级语言是什么？
- 【光学】基于matlab光栅衍射仿真【含Matlab源码 502期】
- 大型体检系统源码，PEIS医院体检管理系统源码
- 从安装双系统到TurtleBot3入门教程
- 摄像头各参数的意义_详解：摄像头参数介绍说明
- AVI视频文件编码格式不受支持0xc00d5212怎么解决？
- spyder使用笔记
- 【科普】波特率和比特速率的理解
- Java实现Socket网络聊天室
- python读HDF数据
- 如何通过自学成为一名安卓软件开发工程师？
- 雨林木风 Ghost XP SP2 精简版 Y2.0
- 【PS技巧】如何校正倾斜的图片
- 再见安卓 鸿蒙,鸿蒙os 再见安卓
- qt 官网所有版本下载-免注册
- 13 服务：愿意为您效劳
- 百度搜狗360快速排名可以解决网站排名的哪些问题呢？
- 如何通过mac地址查询ip