文件上传组件fileinput的使用

最新推荐文章于 2025-07-11 14:45:08 发布

weixin_33947521

最新推荐文章于 2025-07-11 14:45:08 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/729917/blog/885430

本文介绍了如何在网页中使用Bootstrap FileInput插件实现文件上传功能。包括引入必要的css和js文件、设置html结构及编写js代码实现文件上传。特别强调了版本兼容性和上传文件类型的限制。

2019独角兽企业重金招聘Python工程师标准>>>

1.引入相应的css,js文件。注意jquery,bootstrap,fileinput之间的版本，有些版本之间不兼容会无效果，最好使用官网例子使用的版本。

<link href="webjars/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="webjars/bootstrap-fileinput/4.3.5/css/fileinput.min.css" rel="stylesheet">
<script type="text/javascript" src="webjars/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap-fileinput/4.3.5/js/locales/zh.js"></script>

2.html代码

<div class="modal fade" id="userModal">
  	<div class="modal-dialog">
  		<div class="modal-content">
  			<div class="modal-header">
  				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  				<h4 class="modal-title" id="myModalLabel">文件上传</h4>
  			</div>
  			<div class="modal-body">
  				<div class="container-fluid">
  					<label class="control-label">选择文件</label>
					<!-- multiple:表示同时可以上传多个 -->
					<input type="file" name="file" class="form-control" id="projectfile" multiple value="${deal.image}" />
	  				<hr>
  				</div>
  				<div class="alert alert-warning alert-dismissible" role="alert" id="saveMsg" style="display: none">
				  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				  <strong>提示:</strong> 请选择文件并上传文件后再保存
				</div>
  			</div>
  			<div class="modal-footer">
  				<button type="button" class="btn green" id="batchSaveUser">保存</button>
  			</div>
  		</div>
  	</div>
  </div>

3.js代码

$('#projectfile').fileinput({
        language: 'zh',
        uploadUrl: $("#contextPath").val() + "/admin/permissions/user/upload",
        allowedFileExtensions : ['xlsx', 'xls'],
        showUpload: true,
        fileActionSettings: {showUpload: false}
    });
	//文件上传后执行的方法
	$('#projectfile').on('fileuploaded', function(event, data, previewId, index) {
	    var form = data.form, files = data.files, extra = data.extra,
	        response = data.response, reader = data.reader;
	    $("#uploadFileName").val(response.fileName);
	});

可以通过fileuploaded事件，监听获得文件上传成功后，后台请求返回的数据。

转载于:https://my.oschina.net/u/729917/blog/885430