Bootstrap fileinput图片上传 jquery

原创于 2020-06-24 11:59:54 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

jquery js 专栏收录该内容

28 篇文章

订阅专栏

该博客介绍了如何利用Bootstrap的fileinput插件进行图片上传操作。内容包括引入必要的JS和CSS资源，以及如何初始化fileinputs函数以实现上传功能。

上传图片元素显示
先引用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);
	    });
	
	}