Bootstrap fileinput图片上传 jquery

上传图片元素显示
先引用js css，js css可以在网上进行下载使用

<link href="../../UI/Style/fileinput.css" rel="stylesheet" />
<script src="../../UI/Scripts/fileinput.js"></script>
<script src="../../UI/Scripts/locales/zh.js"></script>

<div class="container kv-main" style="width:850px;">
<input id="file-1" name="file-zh" class="file-loading" type="file" data-	preview-file-type="any">
</div>

首先fileinputs()函数方法需要初始化

$(function(){
fileinputs()
})

//上传图片使用方法

function fileinputs() {
$("#file-1").fileinput({
uploadUrl: "http://192.168.1.188:3384/Page/ERP/Attachment.aspx?action=addInfo", //此处调用的就是接口
allowedFileExtensions: ['jpg', 'png', 'gif', 'BMP'], //可上传的图片类型，也可以写其他的类型，这里根据自己的需求
maxFileSize: 0,
language: 'zh',
uploadLabel: "上传附件",
browseLabel: '选择附件',
browseClass: "layui-btn",  //这里使用的layui里的按钮如果不是使用的layui框架可以删除 // 浏览按钮样式
uploadClass: "layui-btn",// 这里使用的layui里的按钮如果不是使用的layui框架可以删除
layoutTemplates: {
actionUpload: '',//去除上传预览缩略图中的上传图片
actionDownload: '', //去除上传预览缩略图中的下载图标
},
uploadExtraData: function (previewId, index) {   //额外参数的关键点
var obj = {};
obj.FDesc = $('#Duty').val();
obj.FSenderID = $('#userinfo').attr('data-usercode');
obj.FSourceBillNo = fbillnoFile;
obj.FTypeID = 2;
return obj;
//这个函数方法里就是你要传的参数格式
},

}).on("fileuploaded", function (event, data, previewId, index) {//该方法将在上传之前触发
//console.log(data.response);
var result = data.response; //后台返回的json
if (result.errcode == "0") {
dialog.promptNoCancle('上传成功', result.errmsg, 'success', function (s) {
$('#file-1').fileinput('refresh', {});//清空记录
});
// 这里使用的是弹窗，根据自己的需求设定
} else {
alert('上传失败')
}

}).on('fileerror', function (event, data, previewId, index) {
//该方法将在上传出現異常触发
//console.log(data.jqXHR.responseText);
});

}