基于WebUploader的文件上传js插件

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( '<div id="' + file.id + '" class="item">' +   '<h4 class="info">' + file.name + '</h4>' +   '<p class="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 = $('<div class="progress progress-striped active">' +    '<div class="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';  } else if ( type === 'stopUpload' ) {   state = 'paused';  } else if ( 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,  // Web Uploader实例  uploader; // 初始化Web Uploader 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    '<div id="' + file.id + '" class="file-item thumbnail">' +     '<img>' +  //创建一个为info的class     '<div class="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('.progress span');  // 避免重复创建  if ( !$percent.length ) {   $percent = $('<p class="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 = $('<div class="error"></div>').appendTo( $li );  }  $error.text('上传失败'); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on( 'uploadComplete', function( file ) {  $( '#'+file.id ).find('.progress').remove(); });});

 ServletContext application = this.getServletContext(); String tempDirectory = application.getRealPath(Constant.TEMP_DIRECTORY) + "/"; String realDirectory = application.getRealPath(Constant.REAL_DIRECTORY) + "/";

List<FileItem> list = upload.parseRequest(request); Iterator<FileItem> iter = list.iterator(); while (iter.hasNext()) { FileItem item = 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表单域才将该对象中的内容写到真实文件夹中   */  String lastpath = item.getName();//获取上传文件的名称  lastpath = lastpath.substring(lastpath.lastIndexOf("."));  String filename = UUID.randomUUID().toString().replace("-", "") + lastpath;  item.write(new File(realDirectory+filename));

package com.lanyou.support.servlet;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileItemFactory;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import org.apache.struts2.ServletActionContext;public class FileUpload extends HttpServlet { private static final long serialVersionUID = 1L; private static Log logger = LogFactory.getLog(FileUpload.class); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 类型 1事件上传文件 2apk String t = req.getParameter("t") == null ? "1" : req.getParameter("t") .trim(); String path = ""; JSONObject ob = new JSONObject(); try {  //将请求消息中的每一个项目封装成单独DiskFileItem对象的任务 //当上传的文件项目比较小时保存在内存中，比较大时保存在磁盘零时文件夹中 //建立文件仓库(工厂) FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload servletFileUpload = new ServletFileUpload(factory); //对上传的文件进行设定 servletFileUpload.setSizeMax(1024 * 1024 * 2);// 最大2M数据 servletFileUpload.setFileSizeMax(2 * 1024 * 1024); servletFileUpload.setHeaderEncoding("UTF-8");// 解决文件名乱码的问题  //解析请求正文，获取上传文件，不抛出异常则写入真实路径 //根据请求获取文件列表 List<FileItem> fileItemsList = servletFileUpload.parseRequest(req); //从文件列表中取出单独的文件对象 for (FileItem item : 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());   //上传文件的名称 String fileName = item.getName(); String ent = ""; //内容的类型 if (item.getContentType().equalsIgnoreCase("image/x-png") || item.getContentType().equalsIgnoreCase(  "image/png")) { ent = ".png"; } else if (item.getContentType().equalsIgnoreCase( "image/gif")) { ent = ".gif"; } else if (item.getContentType().equalsIgnoreCase( "image/bmp")) { ent = ".bmp"; } else if (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; } // 保存文件到服务器上 File file = new File(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 (Exception e) { e.printStackTrace(); } finally { // 响应客户端 // resp.setContentType("text/html; charset=UTF-8"); // resp.getWriter().write(ob.toString()); } }}