一个简单的plupload例子
在网上找了许多例子,都不能用,有些后台竟然还是servlet?
后来在这里找到一份简单而且能用的例子plupload组件结合struts2完成上传 ,不过他的没有分段上传,我就自己改了下。
下面是内容:
jsp代码
<input type="hidden" id="saveFileName"/>
<button id="pickfiles" class="outButton btn btn-success">导入Excel</button>
<span id="filelist" ><font style="color:#666666;" size="2">您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5.</font></span>
js代码
function initPlupload(){
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass an id...
//container: document.getElementById('container'), // ... or DOM Element itself
url : appPath + "/personInfo/personExcel_uploadExcel.do",
flash_swf_url : appPath + '/js/lib/plupload/Moxie.swf',
silverlight_xap_url : appPath + '/js/lib/plupload/Moxie.xap',
chunk_size : '1mb',
filters : {
max_file_size : '20mb',//限制文件大小
mime_types: [
{ title : "Excel files", extensions : "xlsx,xls"}
], //限制文件类型
prevent_duplicates : true //不允许选取重复文件
},
init: {
BeforeUpload :function(up,file){
//分段上传,会获取不到原名,所以这里添加了一个额外的参数用来传递文件名
up.settings.multipart_params = {trueName : file.name};
},
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
},
FilesAdded: function(up, files) {
if(up.files.length>1) {
alert("只允许上传单个文件!");
return;
}
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<span id="' + file.id + '"><font style="color:#666666;" size="2">' + file.name + ' (' + plupload.formatSize(file.size) + ')</font> <b></b></span>';
up.start();
});
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
UploadComplete: function(up, file) {
if(up.files.length<1) {
alert("请点击选择文件,再进行上传!");
return;
}
alert("上传成功!");
setTimeout(function(){
$("#filelist").empty();
}, 10000);
//up.destroy();
},
FileUploaded:function(uploader,file,responseObject) {
var response = JSON.stringify(responseObject.response);
console.log("response:"+response);
$("#saveFileName").val(response);
},
Error: function(up, err) {
if("Duplicate file error." == err.message){
alert("上传失败,不允许选取重复文件");
}else{
alert("上传失败,"+err.message);
}
setTimeout(function(){
$("#filelist").empty();
}, 10000);
}
}
});
uploader.init();
}
action代码
全局属性
//块总数
private int chunks = -1;
//当前块
private int chunk = 1;
private String fileFileName; //文件名称,在分段时变成blob,分段无用
private String fileContentType; //文件类型
private File file; //上传过来的文件
private String saveFileName;
private String trueName;//带参传过来的真实文件名
//一些getter、setter方法在此省略
方法
public void uploadExcel(){
String savePath = ServletActionContext.getServletContext().getRealPath("upload/plupload");
System.out.println("\n\n\n\n\n"+savePath);
//String name = UUID.randomUUID().toString().replace("-", "");//唯一id,这里在分段上传时无用
File uploadfile = null;
String saveFileName = null;
//saveFileName = name + "_" + fileFileName;
saveFileName = trueName;
System.out.println("saveFileName:"+saveFileName);
System.out.println("trueName:"+trueName);
uploadfile = new File(savePath, saveFileName);
if (!uploadfile.getParentFile().exists()) {
uploadfile.getParentFile().mkdirs();
}
if(chunk==0 && uploadfile.exists()){
uploadfile.delete();
uploadfile = new File(savePath, saveFileName);
}
FileOutputStream fos = null;
FileInputStream fis = null;
try {
if(uploadfile.exists()){
fos = new FileOutputStream(uploadfile, true);
}else{
fos = new FileOutputStream(uploadfile);
}
fis = new FileInputStream(file);
byte[] buffers = new byte[1024];
int len = 0;
while ((len = fis.read(buffers)) != -1) {
fos.write(buffers, 0, len);
}
if(chunk == chunks-1){
//一个完整的文件上传
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(saveFileName);
} catch (IOException e) {
e.printStackTrace();
response.setContentType("text/html;charset=UTF-8");
try {
response.getWriter().write("上传发生错误");
} catch (IOException e1) {
e1.printStackTrace();
}
}finally {
try {
fos.close();
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}