bootstrap-fileinput 文件导入

最新推荐文章于 2023-12-25 14:17:08 发布

晴天小风

最新推荐文章于 2023-12-25 14:17:08 发布

阅读量757

点赞数

分类专栏： Web前端笔记文章标签： bootstrap fileinput

本文链接：https://blog.csdn.net/ag_nevergiveup/article/details/105265261

版权

Web前端笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

页面代码：

<input id="file" name="file" type="file" data-show-preview="false">
<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>

需要导入js和css文件：(路径需要替换，文件如图：)

<!-- bootstrap 文件上传组件js-->
	<script src="../bootstrap-fileinput/fileinput.js"></script>
	<script src="../bootstrap-fileinput/zh.js"></script>
<!-- bootstrap 文件上传组件css-->
<link href=".../bootstrap-fileinput/fileinput.css}" rel="stylesheet"/>

js处理：

$("#file").fileinput({
			language: 'zh', //汉化
			uploadUrl: uploadUrl, //接受请求地址
			uploadAsync : true,  //是否异步，默认true
		})

//异步上传返回结果处理
	$("#file").on("fileuploaded", function(event, data, previewId, index) {
		
	});

	//选择文件后处理事件
    $("#file").on("filebatchselected", function(event, files) {
       
    });

    //点击浏览框右上角X 清空文件后响应事件
    $("#file").on("filecleared",function(event, data, msg){
       
    });

预览：