基于WebUploader的文件上传js插件
首先把地址甩出来，http://fex-team.github.io/webuploader/
里面有比较完整的demo案例文档，本文主要是基于文件上传和图片上传增加了大量的注释，基本保证了每行代码都有注释以助于理解，是对官网demo的增强版，希望可以帮助大家更好的理解该插件
首先是文件上传
jQuery(function(){
var$=jQuery,
$list=$('#thelist'),
$btn=$('#ctlBtn'),
state='pending',
uploader;
//初始化，实际上可直接访问Webuploader.upLoader
uploader=WebUploader.create({
//不压缩image
resize:false,
//swf文件路径
swf:BASE_URL+'/js/Uploader.swf',
//发送给后台代码进行处理，保存到服务器上
server:'http://webuploader.duapp.com/server/fileupload.php',
//选择文件的按钮。可选。
//内部根据当前运行是创建，可能是input元素，也可能是flash.
pick:'#picker'
});
//uploader添加事件，当文件被加入队列后触发
uploader.on('fileQueued',function(file){
//在加入队列时，创建一个样式，供后面上传成功失败等等调用，定义一个*p表示指向该事件样式
$list.append('<divid="'+file.id+'"class="item">'+
'<h4class="info">'+file.name+'</h4>'+
'<pclass="state">等待上传...</p>'+
'</div>');
});
//文件上传过程中触发，携带上传进度，file表示上传的文件，percentage表示上传的进度
uploader.on('uploadProgress',function(file,percentage){
//定义一个变量名创建进度模块
var$li=$('#'+file.id),
//找到$li下class为progress的，并定义为$percent------为什么先寻找在创建
$percent=$li.find('.progress.progress-bar');
//如果$percent没值，就创建进度条加入到对应的文件名下，避免重复创建
if(!$percent.length){
$percent=$('<divclass="progressprogress-stripedactive">'+
'<divclass="progress-bar"role="progressbar"style="width:0%">'+
'</div>'+
'</div>').appendTo($li).find('.progress-bar');
}
//为进度模块添加弹出文本
$li.find('p.state').text('上传中');
//为进度模块创建读条的百分比
$percent.css('width',percentage*100+'%');
});
//uploader触发事件，当上传成功事调用这个事件
uploader.on('uploadSuccess',function(file){
//调用文件被加入时触发的事件，findstate，并添加文本为已上传
$('#'+file.id).find('p.state').text('已上传');
});
//uploader触发事件，当上传失败时触发该事件
uploader.on('uploadError',function(file){
//调用文件被加入时触发的事件，findstate，并添加文本为上传出错
$('#'+file.id).find('p.state').text('上传出错');
});
//该事件表示不管上传成功还是失败都会触发该事件
uploader.on('uploadComplete',function(file){
//调用
$('#'+file.id).find('.progress').fadeOut();
});
//这是一个特殊事件，所有的触发都会响应到，type的作用是记录当前是什么事件在触发，并给state赋值
uploader.on('all',function(type){
if(type==='startUpload'){
state='uploading';
}elseif(type==='stopUpload'){
state='paused';
}elseif(type==='uploadFinished'){
state='done';
}
//根据state判断弹出文本
if(state==='uploading'){
$btn.text('暂停上传');
}else{
$btn.text('开始上传');
}
});
//当按钮被点击时触发，根据状态开始上传或是暂停
$btn.on('click',function(){
if(state==='uploading'){
uploader.stop();
}else{
uploader.upload();
}
});
});
然后是图片上传
jQuery(function(){
//将jquery赋值给一个全局的变量
var$=jQuery,
$list=$('#fileList'),
//优化retina,在retina下这个值是2，设备像素比
ratio=window.devicePixelRatio||1,
//缩略图大小
thumbnailWidth=100*ratio,
thumbnailHeight=100*ratio,
//WebUploader实例
uploader;
//初始化WebUploader
uploader=WebUploader.create({
//自动上传。
auto:true,
//swf文件路径
swf:BASE_URL+'/js/Uploader.swf',
//文件接收服务端。调用代码，把图片保存在服务器端
server:'http://webuploader.duapp.com/server/fileupload.php',
//选择文件的按钮。可选。
//内部根据当前运行是创建，可能是input元素，也可能是flash.
pick:'#filePicker',
//只允许选择文件，可选。
accept:{
title:'Images',
extensions:'gif,jpg,jpeg,bmp,png',
mimeTypes:'image/*'
}
});
//当有文件添加进来的时候触发这个事件
uploader.on('fileQueued',function(file){
//定义变量li
var$li=$(
//创建一个id
'<divid="'+file.id+'"class="file-itemthumbnail">'+
'<img>'+
//创建一个为info的class
'<divclass="info">'+file.name+'</div>'+
'</div>'
),
$img=$li.find('img');
//把定义的li加入到list中
$list.append($li);
//创建缩略图，此过程为异步，需要传入callBack（function(error,src))，通常在图片加入队列后调用此方法，以增强交互性
//callback有两个参数，当失败时调用error，src存放的是缩略图的地址
uploader.makeThumb(file,function(error,src){
if(error){
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src',src);
},thumbnailWidth,thumbnailHeight);
});
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功，给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败，现实上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
});
下面是java的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器
1.首先我们应该为上传的文件建一个存放的位置，一般位置分为临时和真是文件夹，那我们就需要获取这俩个文件夹的绝对路径，在servlet中我们可以这样做
ServletContextapplication=this.getServletContext(); StringtempDirectory=application.getRealPath(Constant.TEMP_DIRECTORY)+"/"; StringrealDirectory=application.getRealPath(Constant.REAL_DIRECTORY)+"/";
然后建立文件工厂即仓库一个参数表示存放多大后flush，
FileItemFactoryfactory=newDiskFileItemFactory(Constant.SIZE_THRESHOLD,newFile(tempDirectory)); ServletFileUploadupload=newServletFileUpload(factory);
2.对上传的文件进行设定
upload.setSizeMax(500*1024*1024);//设置该次上传最大值为500M3,.解析请求正文，获取上传文件，不抛出异常则写入真是路径
List<FileItem>list=upload.parseRequest(request);
Iterator<FileItem>iter=list.iterator();
while(iter.hasNext()){
FileItemitem=iter.next();
//item.isFormField()用来判断当前对象是否是file表单域的数据如果返回值是true说明不是就是普通表单域
if(item.isFormField()){
System.out.println("普通表单域"+item.getFieldName());
System.out.println(item.getString("utf-8"));
}else{
//System.out.println("file表单域"+item.getFieldName());
/*
*只有file表单域才将该对象中的内容写到真实文件夹中
*/
Stringlastpath=item.getName();//获取上传文件的名称
lastpath=lastpath.substring(lastpath.lastIndexOf("."));
Stringfilename=UUID.randomUUID().toString().replace("-","")+lastpath;
item.write(newFile(realDirectory+filename));
packagecom.lanyou.support.servlet;
importjava.io.File;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.List;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importnet.sf.json.JSONObject;
importorg.apache.commons.fileupload.FileItem;
importorg.apache.commons.fileupload.FileItemFactory;
importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
importorg.apache.commons.fileupload.servlet.ServletFileUpload;
importorg.apache.commons.logging.Log;
importorg.apache.commons.logging.LogFactory;
importorg.apache.struts2.ServletActionContext;
publicclassFileUploadextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
privatestaticLoglogger=LogFactory.getLog(FileUpload.class);
@Override
protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,IOException{
doPost(req,resp);
}
@Override
protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,IOException{
//类型1事件上传文件2apk
Stringt=req.getParameter("t")==null?"1":req.getParameter("t")
.trim();
Stringpath="";
JSONObjectob=newJSONObject();
try{
//将请求消息中的每一个项目封装成单独DiskFileItem对象的任务
//当上传的文件项目比较小时保存在内存中，比较大时保存在磁盘零时文件夹中
//建立文件仓库(工厂)
FileItemFactoryfactory=newDiskFileItemFactory();
ServletFileUploadservletFileUpload=newServletFileUpload(factory);
//对上传的文件进行设定
servletFileUpload.setSizeMax(1024*1024*2);//最大2M数据
servletFileUpload.setFileSizeMax(2*1024*1024);
servletFileUpload.setHeaderEncoding("UTF-8");//解决文件名乱码的问题
//解析请求正文，获取上传文件，不抛出异常则写入真实路径
//根据请求获取文件列表
List<FileItem>fileItemsList=servletFileUpload.parseRequest(req);
//从文件列表中取出单独的文件对象
for(FileItemitem:fileItemsList){
//判断该文件是否是普通的表单类型，该处是file类型进入判断
if(!item.isFormField()){
//如果上传的文件大于指定的大小则return
if(item.getSize()>2*1024*1024){
return;
}
//System.out.println("上传文件的大小："+item.getSize());
//System.out.println("上传文件的类型："+item.getContentType());
//System.out.println("上传文件的名称："+item.getName());
//上传文件的名称
StringfileName=item.getName();
Stringent="";
//内容的类型
if(item.getContentType().equalsIgnoreCase("image/x-png")
||item.getContentType().equalsIgnoreCase(
"image/png")){
ent=".png";
}elseif(item.getContentType().equalsIgnoreCase(
"image/gif")){
ent=".gif";
}elseif(item.getContentType().equalsIgnoreCase(
"image/bmp")){
ent=".bmp";
}elseif(item.getContentType().equalsIgnoreCase(
"image/pjpeg")
||item.getContentType().equalsIgnoreCase(
"image/jpeg")){
ent=".jpg";
}
//获取文件的是那种格式
if(fileName.lastIndexOf(".")!=-1){
ent=fileName.substring(fileName.lastIndexOf("."));
}
fileName="ev_"+System.currentTimeMillis()+ent;
//定义文件路径，根据你的文件夹结构，可能需要做修改
if(t.equals("1")){
path="upload/ev/"+fileName;
}else{
path="upload/pk/"+fileName;
}
//保存文件到服务器上
Filefile=newFile(req.getSession().getServletContext()
.getRealPath(path));
if(!file.getParentFile().exists()){
file.getParentFile().mkdirs();
}
item.write(file);
//logger.info(path);
//break;
ob.accumulate("url",path);
}
}
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().write(ob.toString());
}catch(Exceptione){
e.printStackTrace();
}finally{
//响应客户端
//resp.setContentType("text/html;charset=UTF-8");
//resp.getWriter().write(ob.toString());
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。