脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap fileinput上传图片

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

 更新时间：2016年09月05日 11:39:45   作者：韬shao  
这篇文章主要介绍了BootStrap使用file-input插件上传图片的方法，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>&times; 
<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才解决掉

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

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

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


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

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

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

您可能感兴趣的文章:

相关文章

  • JS使用定时器与事件监听实现轮播图切换功能

    JS使用定时器与事件监听实现轮播图切换功能

    现在很多网站都有轮播图,下面这篇文章主要给大家介绍了关于JS如何使用定时器与事件监听实现轮播图切换功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JavaScript实现可拖拽的拖动层Div实例

    JavaScript实现可拖拽的拖动层Div实例

    这篇文章主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
    2015-08-08
  • 微信小程序利用Canvas绘制图片和竖排文字详解

    微信小程序利用Canvas绘制图片和竖排文字详解

    这篇文章主要介绍了微信小程序利用Canvas绘制图片和竖排文字详解，合成图片应该按照 Canvas 的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下,需要的朋友可以参考下
    2019-06-06
  • 在页面加载之后执行JavaScript

    在页面加载之后执行JavaScript

    这篇文章主要介绍了在页面加载之后执行JavaScript的详细过程，本文通过实例代码文字解说给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 基于Bootstrap的标签页组件及bootstrap-tab使用说明

    基于Bootstrap的标签页组件及bootstrap-tab使用说明

    这篇文章主要介绍了基于Bootstrap的标签页组件及bootstrap-tab使用说明,需要的朋友可以参考下
    2017-07-07
  • JavaScript入门系列之知识点总结

    JavaScript入门系列之知识点总结

    JavaScript 是属于网络的脚本语言。本文是小编日常收集整理些javascript入门基础知识，对js新手朋友非常有帮助，对js入门知识点感兴趣的朋友一起学习吧
    2016-03-03
  • Openlayers绘制聚合标注

    Openlayers绘制聚合标注

    这篇文章主要为大家详细介绍了Openlayers实现聚合标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 解决JS无法调用Controller问题的方法

    解决JS无法调用Controller问题的方法

    这篇文章主要介绍了解决JS无法调用Controller问题的方法,需要的朋友可以参考下
    2015-12-12
  • JS简单实用的倒计时效果实现代码

    JS简单实用的倒计时效果实现代码

    没有事研究了下倒计时的效果，因此自己练习了一下，需要的朋友可以参考下
    2012-08-08
  • window.location不跳转的问题解决方法

    window.location不跳转的问题解决方法

    window.location的跳转失效的情况有没有遇到过啊，这主要是冒泡传递影响了，下面有个不错的解决方法，大家可以参考下
    2014-04-04

最新评论