input插件上传图片的方法

日期：2020-06-10 栏目：程序人生浏览：次

最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法

首先根据自己的项目路径引入插件css和js文件

注意locale语言文件在fileinput.min.js文件之后引入

<link href=""> <script src=""></script> <script src="" type="text/javascript"></script>

然后是html代码因为我不是专业前端所以前端代码写的很烂轻喷敲打

<span> </span><div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <span> </span><div> <span> </span><div> <span> </span><div> <span> </span><button type="button" data-dismiss="modal" aria-hidden="true"> <span> </span>× <span> </span></button> <span> </span><h3> <span> </span><b>新增曲谱信息</b> <span> </span></h3> <span> </span></div> <span> </span><div> <span> </span><form role="form" enctype="multipart/form-data"> <span> </span> <div> <span> </span> <span>曲谱名称</span> <span> </span> <input type="text" placeholder=""> <span> </span> </div> <span> </span> <div> <span> </span> <span> </span><span>曲谱类型</span> <span> </span> <input type="text"> <span> </span> <span> </span> </div> <span> </span> <span> </span> <div> <span> </span> <span> </span><span>曲谱难度</span> <span> </span> <input type="text"> <span> </span> <span> </span> </div> <span> </span> <div> <span> </span> <span>曲调</span> <span> </span> <input type="text"> <span> </span> </div> <span> </span> <div> <span> </span><input type="file"/> <span> </span> </div> <span> </span></form> <span> </span></div> <span> </span><div> <span> </span><button type="button" data-dismiss="modal">关闭 <span> </span></button> <span> </span> <span> </span></div> <span> </span></div> <span> </span></div> <span> </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></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", :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才解决掉

input插件上传图片的方法