jquery 文件上传 Uploader 案例
秦安怡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文件上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="/js/jquery/plupload/plupload.js"></script>
<script type="text/javascript"
src="/js/jquery/plupload/plupload.gears.js"></script>
<script type="text/javascript"
src="/js/jquery/plupload/plupload.flash.js"></script>
</head>
<body style="overflow: auto;">
<form id="form_files" action="/servlet/pluploadServlet" method="post">
<input type="button" id="pickfiles" class="ButtonAccessory" value="添加" />
<input type="button" id="uploadfiles" class="ButtonUpload" value="上传" />
<table id="filelist">
<tbody></tbody>
</table>
<div id="error"></div>
</form>
</body>
</html><script type="text/javascript">
$(function() {
var uploader = new plupload.Uploader({
runtimes : 'gears,flash',
browse_button : 'pickfiles', //选择文件按钮ID
max_file_size : '10mb', //文件上传最大值
chunk_size : '1mb',//文件需要分块上传时，每块的大少
unique_names : true, // 上传的文件名是否唯一,只有在未进行分块上传时文件名唯一才有效
url : '/servlet/uploadServlet', //提交到后台的url地址
flash_swf_url : '/js/jquery/plupload/plupload.flash.swf',//plupload.flash.swf文件所在路径
silverlight_xap_url : '/js/jquery/plupload/plupload.silverlight.xap',//silverlight所在路径
filters : [ //文件类型过滤，只上传指定的文件类型
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
] ,
resize : {width : 100, height : 80, quality : 70} //上传图片时,是否生成缩略图
});
/*在实际使用中根据需要对上述属性进行删、减,
* 如chunk_size、unique_names、silverlight_xap_url、resize
*/
/*页面打开时进行初始化界面,如加载已经上传的文件信息*/
uploader.bind('Init', function(up) {
$('#filelist tbody').html("<tr><td>暂无上传文件</td></tr>");
});
/*单击【上传】按钮时触发该函数，进行文件上传(其中uploadfiles为上传按钮ID值)*/
$('#uploadfiles').click(function(e) {
uploader.start();
});
/*
*绑定事件:FilesAdded(up:Uploader, files:Array)
*
*当选择上传文件时调用该函数;
*
*其中,
*files为本次选择的文件列表；
*up对象中的files属性表示上传队列中的总文件列表(不包括本次选择的文件)
*
* 通过这两个对象可以判断所选文件中是否有重复。
*/
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
$('#filelist tbody').append(
//将选择的文件添加到页面
'<tr id="'+file.id+'"><td>'+file.name+'</td><td>'
+plupload.formatSize(file.size)+'</td><td><b></d></td></tr>')
});
up.refresh(); // Reposition Flash/Silverlight
});
/*
*绑定事件:UploadProgress(uploader:Uploader, file:File)
*当单击上传按钮时，处理每个文件的上传进度
*/
uploader.bind('UploadProgress', function(up, file) {
$('#' + file.id + " b").html('<span>'+file.percent + "%</span>");
});
/*
*绑定事件:Error(uploader:Uploader, error:Object)
*
*/
uploader.bind('Error', function(up, err) {
$('#error').append("<div>Error: " + err.code + ", Message: "
+ err.message +(err.file ? ", File: " + err.file.name : "") + "</div>");
up.refresh(); // Reposition Flash/Silverlight
});
/*
*绑定事件:FileUploaded(uploader:Uploader, file:File, response:Object)
*当文件上传成功后，将进度条显示100%
*/
uploader.bind('FileUploaded', function(up, file) {
$('#' + file.id + " b").html("100%");
});
/*
*绑定事件:UploadFile(uploader:Uploader, file:File)
*当单击上传按钮时，首先触发该事件,如果没有要处理的可以不添加该事件
*/
uploader.bind('UploadFile',function(up,file){
alert(file.name);
});
//
uploader.init();
});
</script>
Plupload API：http://www.plupload.com/plupload/docs/api//*上传文件Servlet后台简单处理*/
/*LIB目录下需要添加包
commons-fileupload-1.2.jar
commons-io-1.4.jar
*/
//判断上传表单是否为上传表单类型,即multipart/form-data
boolean isMultipart = ServletFileUpload.isMultipartContent(req);
public static final String UPLOADDIR="d:/test/";
public static final int BUF_SIZE = 4096;
if (isMultipart) {
ServletFileUpload upload = new ServletFileUpload();
try {
FileItemIterator iter = upload.getItemIterator(req);
while (iter.hasNext()) {
//每一个item就代表一个表单输出项
FileItemStream item = iter.next();
//input名称
String name = item.getFieldName();
InputStream input = item.openStream();
//判断input是否为普通表单输入项,如果不是说明是上传
if (!item.isFormField()) {
//得到上传文件的名称
String oldName = item.getName();
//为了确保文件名唯一，可以重新命名文件名称
String newFileName = UUID.randomUUID().toString();
if (oldName.lastIndexOf(".") != -1) {
// 含有后缀
String suffixName = oldName.substring(oldName.lastIndexOf(".")); // 后缀
newFileName += suffixName;
}
File newFile = new File(UPLOADDIR + newFileName);
BufferedOutputStream output = new BufferedOutputStream(new FileOutputStream(newFile));
byte[] data = new byte[1024];
int count;
while ((count = input.read(data, 0, 1024)) != -1) {
output.write(data, 0, count);
}
input.close();
output.flush();
output.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
类似资料：