[javascript]代码库
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=basePath %>fileupload/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>fileupload/css/fileinput.min.css" />
<script src="<%=basePath %>fileupload/js/jquery.3.0.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath %>fileupload/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath %>fileupload/js/fileinput.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath %>fileupload/js/locales/zh.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<!--
multiple表示允许同时上传多个文件,class=“file-loading”表示标签的样式。这里很重要,如果class="file",则中文化不能生效。
-->
<input type="file" name="myfile" id="file-Portrait1" multiple class="file-loading">
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
var control = $('#file-Portrait1');
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: '/struts2/fileupload.do', //上传的地址
//allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
showPreview: true,//是否预览
dropZoneEnabled: true,//是否显示拖拽区域
uploadAsync: true, //异步上传
browseClass: "btn btn-primary", //按钮样式
maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//minFileCount: 0,
maxFileCount: 100, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量{n} 超过允许的最大数值{m}!"
});
control.on("fileuploaded", function(event, data, previewId, index) {
console.log(event);
console.log(data.response);//返回的数据
console.log(previewId);
console.log(index);
});
});
</script>