基于WebUploader的文件上传插件

首先把地址甩出来，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( '<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();
    });
});

 

下面是java的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器

http://blog.csdn.net/zsw2zkl/article/details/7426007

 

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());
		}
	}
}