jQuery File Upload 是一款实用的jQuery文件上传组件。
下载地址：https://github.com/blueimp/jQuery-File-Upload
1、下载完成后，将需要用到的文件夹复制到项目中
2、在要使用上传功能的jsp中引入js与css
注意：js文件引入的先后顺序不可以错
本人实际开发的项目中全局有引入bootstrap的样式，在这里不在代码中写出了。
<link rel="stylesheet" href="js/jQueryFileUpload/css/jquery.fileupload.css"/>
<link rel="stylesheet" href="js/jQueryFileUpload/css/jquery.fileupload-ui.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!-- jquery file upload相关js -->
<script type="text/javascript" src="js/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
<!--在IE下应载入此文件解决跨域问题 -->
<script type="text/javascript" src="js/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/jQueryFileUpload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="js/jQueryFileUpload/js/jquery.fileupload-process.js"></script>
<!--如果需要文件类型验证必须引入 -->
<script type="text/javascript" src="js/jQueryFileUpload/js/jquery.fileupload-validate.js"></script>
3、jsp代码
说明：实际开发的项目中，单个页面样式是在全局的样式下进行调整的，所以此处只是样例而已，具体样式调整要视自己的项目而定。
<style type="text/css">
.upload_box {
width: 500px;
position: absolute;
left: 216px;
}
.upload {
width: 100px;
font-size: 16px;
}
.progress_box {
margin-top: 10px;
display: none;
}
</style>
<body>
<div>
<span><i class="fa fa-upload" aria-hidden="true"></i>附件上传:</span>
<span style="display: inline-block; margin-left: 1005px"></span>
</div>
<div class="upload_box">
<!--将文件域隐藏，设置label 的 for属性的值为文件域的id，然后再对label进行美化，这样点击label也能打开文件选择对话框 -->
<label for="fileupload" class="upload btn btn-success glyphicon glyphicon-upload" style="line-height: 12px;">
<span style="vertical-align: bottom; margin-left: -10px;">上传</span>
</label>
<!-- 此处name="attach"与后台接收的MultipartFile 后的名称要统一 -->
<input id="fileupload" type="file" name="attach" style="display: none;">
<!--上传进度条-->
<div class="progress_box">
<!--上传进度使用 h5 中新增的 progress 元素，并创建一个id为upload_info 的控件，用于在上传完成后显示完成信息-->
<progress value="0" max="100" style="position: absolute; left: 200px; height: 25px; width: 200px;"></progress>
<span id="upload_info" style="position: absolute; left: 410px;"></span>
</div>
</div>
</body>上传按钮样式：
4、js代码
$(function () {
InputFileUpload();
});
function InputFileUpload() {
/*
* 这是实现上传的核心代码 我们当前的要求如下 选择文件之后立即上传 上传过程中显示进度条 上传完成后显示提示文字“上传完成”
* 再次添加要上传的文件后，应该将提示文字“上传成功”清除
*/
$('#fileupload').fileupload({
url: apiUrl + '/Upload/upload.do',
Type : 'POST', //请求方式
dataType: 'json', //服务器返回的数据类型
//autoUpload:是否自动上传，即当文件放入file之后便自动上传，默认为true
autoUpload: true,
//acceptFileTypes: /(\.|\/)(xlsx|png|jp?g|gif)$/i, // 允许上传的的文件类型
// maxNumberOfFiles: 1,//最大上传文件数目
maxFileSize: 1024 * 1024 * 1024 * 2, // 最大上传文件大小
minFileSize: 1, // 最小上传文件大小,单位B
// <1>使用方法一：函数属性
// 全局上传处理事件的回调函数，即上传过程时触发
// 设置进度条：用data.loaded与data.total的比进行完成
/*progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('progress').val(progress);
$('#upload_info').html(progress + '%');
},
//上传完成之后的操作，显示在img里面
done: function (e, data) {
// 如果上传的图片，就取消下面代码的注释
//$("#uploadimg").attr('src', data.result.url);
$('#upload_info').html('上传完成');
},*/
})
// <2>使用方法二：绑定事件监听函数，用.on()来用调用回调函数
//显示上传进度条：用data.loaded与data.total的比进行完成
.on('fileuploadprogressall', function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('progress').val(progress);
$('#upload_info').html(progress + '%');
})
// 图片添加完成后触发的事件：用户再次选择文件后，清除提示文字，并设置进度条可见
.on('fileuploadadd', function(e, data) {
var mark = validate(data.files[0]); // 手动来验证文件大小
if (mark) {
$('.progress_box').css('display', 'block');
$('#upload_info').html('');
}
})
/*
* fileuploadadd 事件会在用户添加上传文件后触发
* 所以在这个事件中，我们将默认隐藏的进度条控件显示，并清除上次上传成功后的提示文本。 然后解释 done 事件
* 此事件会在服务器成功返回消息时触发，所以在这个事件中，我们显示图片预览以及显示成功后的提示文本
*/
// 上传请求成功时触发的回调函数
.on('fileuploaddone', function (e, data) {
$('#upload_info').html('上传完成');
var iconClass = "", attExt = "", html = "";
var res = data.result.data;
if (res.attExt != "") {
attExt = res.attExt.substring(1).toLowerCase();
}
if ($.inArray(attExt, imageFormatArray) != "-1") {
iconClass = "sfw-img";
} else if ($.inArray(attExt,
documentFormatArray) != "-1") {
iconClass = "sfw-txt";
} else if ($.inArray(attExt, videoFormatArray) != "-1") {
iconClass = "sfw-video";
} else {
iconClass = "sfw-txt";
}
html = html+
"<tr class='item' id='" + res.attachId + "'>" +
"<td class='type'><i class='icon sfw-icon "+ iconClass+ "'></i></td>" +
"<td class='title'><span class='td-content'>" + beautySub(res.attFilename) + "</span></td>" +
"<td class='datetime' style='border-collapse:collapse;border-left:60px solid white'>" +
"<span class='td-content'>" + new Date(res.uploadTime).format('yyyy-MM-dd ')+ "</span>" +
"</td>" +
"<td class='file-type' style='border-collapse:collapse;border-left:60px solid white'>" +
"<span class='td-content' name='attExt'>" + attExt + "</span>" +
"</td>" +
"<td class='file-size' style='border-collapse:collapse;border-left:60px solid white'>" +
"<span class='td-content'>" + bytesToSize(res.attSize) + "</span>" +
"</td>" +
"<td class='opt' style='border-collapse:collapse;border-left:60px solid white'>" +
"<a href='javascript:void(0);'><i class='icon sfw-icon sfw-del' onclick=delAttachment1(\"" + res.attachId+ "\")></i></a>" +
"</td>" +
"</tr>";
$("#attachment_list").append(html);
enclosureAttachmentIds.push(res.attachId);
attachmentCount++;
console.log("上传附件后enclosureAttachmentIds：" + enclosureAttachmentIds);
$("#attachmentCount").text("已上传附件" + attachmentCount + "个");
$("#AttachmentArea").removeClass("hidden");
$("#AttachmentArea").show();
})
//上传请求结束后，不管成功，错误或者中止都会被触发
.on("fileuploadalways", function(e, data) {
$('.progress_box').css('display', 'none');
});
}
// 校验文件大小
function validate(file) {
//获取文件名称
var fileName = file.name;
//验证图片格式
/*if (!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(fileName)) {
alert("上传文件格式不正确！");
return false;
}
//验证excell表格式
if(!/.(xls|xlsx)$/.test(fileName)){
alert("上传文件格式不正确");
return false;
}*/
// 获取文件大小
var fileSize = file.size;
if (fileSize > 1024 * 1024 * 1024 * 2) {
alert("上传文件大小不能大于2G！");
return false;
} else if (fileSize == 0) {
alert("上传文件大小不能为0！");
return false;
}
return true;
}说明：js代码，一些配置项罗列出来了，但是有的没有用到，比如说文件大小限制，这个是手动去校验的。因为本人也是现学现用，具体的Options还没有完全看懂。
最后附上上传过程的图片：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
