批量选择,批量上传: FancyUpload

批量选择,批量上传: FancyUpload
2010年07月01日
　　FancyUpload
　　--------------------------------------------------
　　1. 介绍:
　　FancyUpload是一个采用Flash与Ajax（MooTools）技术实现包含上传进度条的多文件上传组件，类似于SWFUpload。MooTools是一个与prototype相类似的一个Ajax框架。
　　主页:http://digitarald.de/projects/
　　后台结合使用Servlet响应请求,使用ServletFileUpload(Apache的common-fileupload-1.2.1.jar)处理文件.
　　注意common-fileupload的1.2版本后已经废弃DiskFileUpload类,结合使用ServletFileUpload与DiskFileItemFactory替代,具体过渡代码看API中Package org.apache.commons.fileupload的描述中介绍.
　　关键点:
　　(1)DiskFileItemFactory设置缓存sizeThreshold,设置临时库repository(当缓存溢出会自动写到repository的某个文件).
　　(2)ServletFileUpload设置全部文件大小sizeMax,设置单件文件大小fileSizeMax,解析request获取FileItem List,此后逐个FileItem处理.
　　注意:有些FileItme的getName()返回null,表示某些状态信息而非上传文件,此时应该忽略,否则一个文档会在上传目录生成2个文件.(令人费解!令人咋舌!)
　　for (Iterator iter = fileItemList.iterator(); iter.hasNext();) {
　　FileItem item = (FileItem) iter.next();
　　String fileName = item.getName();
　　if (fileName == null) {
　　continue;
　　}
　　File file = new File(dir, fileName);
　　item.write(file);
　　}
　　//2010年7月1日
　　上面代码理解代码,应该使用FileItme.isFormField判断是否文件表单字段.
　　API: isFormField 方法 isFormField 方法用于判断 FileItem 类对象封装的数据是否属于一个普通表单字段, 还是属 于一个文件表单字段,如果是普通表单字段则返回 true,否则返回 false.
　　for (Iterator iter = fileItemList.iterator(); iter.hasNext();) {
　　FileItem item = (FileItem) iter.next();
　　if(item.isFormField()){
　　continue;
　　}
　　String fileName = item.getName();
　　File file = new File(dir, fileName);
　　item.write(file);
　　}
　　(3)Servlet必须返回状态信息给FancyUpload,否则会Timeout.状态信息使用JSON格式编码,具体内容至少包含status,0表示失败,1表示成功.
　　{"status":"0"}或{"status":"1"}
　　必须注意,JSON中的属性名是String类型,必须用""括住.
　　//2010年7月1日
　　具体showcase可能不同,根据相应的script.php对译为Java即可.
　　2. 使用:
　　(1)多文件选择,多文件上传,而不是通过Queue逐个上传.个人感觉这点好于SWFUpload.
　　(2)配置简单,根据需要修改类同showcase即可.
　　(3)版本跨越大. V2与V3基本不兼容.相关文章可在主页找到.
　　3. 注意事项:
　　(1)单独使用,基本OK,没有问题.
　　(2)集成使用,目前发现和A4J/Richfaces的JS类库冲突,具体原因可能是A4J/Richfaces使用prototype,而FancyUpload使用mootools.这二个JS类库某些全局变量冲突,特别是$的占用问题.暂时未找到合适解决.
　　
　　
　　(3)后台处理,FancyUpload的后台必须返回状态信息确认上传结果,否则老是timeout.
　　4. 示例源码:
　　下载http://github.com/downloads/digitarald/digitarald-fancyupload/fancyupload-complete-source.zip,修改Attach-a-file的showcase,然后从photoqueue的showcase引用图片相关配置.
　　--------------build.xml(即build.php)---------------
　　
　　
　　http://www.w3.org/1999/xhtml">
　　
　　
　　
　　
　　
　　
　　
　　//
　　
　　
　　
　　a.hover {
　　color: red;
　　}
　　#demo-list {
　　padding: 0;
　　list-style: none;
　　margin: 0;
　　}
　　#demo-list .file-invalid {
　　cursor: pointer;
　　color: #514721;
　　padding-left: 48px;
　　line-height: 24px;
　　background: url(assets/error.png) no-repeat 24px 5px;
　　margin-bottom: 1px;
　　}
　　#demo-list .file-invalid span {
　　background-color: #fff6bf;
　　padding: 1px;
　　}
　　#demo-list .file {
　　line-height: 2em;
　　padding-left: 22px;
　　background: url(assets/attach.png) no-repeat 1px 50%;
　　}
　　#demo-list .file span,
　　#demo-list .file a {
　　padding: 0 4px;
　　}
　　#demo-list .file .file-size {
　　color: #666;
　　}
　　#demo-list .file .file-error {
　　color: #8a1f11;
　　}
　　#demo-list .file .file-progress {
　　width: 125px;
　　height: 12px;
　　vertical-align: middle;
　　background-image: url(source/progress.gif);
　　}
　　
　　
　　
　　
　　Choose...
　　
　　More...
　　
　　
　　
　　-----------------Java后台(借助Apache的Common-Upload)----------------
　　public class FileUploadServlet extends HttpServlet {
　　private static final long serialVersionUID = 1L;
　　public static final String UPLOAD_ID = "uid";
　　public static final String UPLOAD_SIZE_THRESHOLD = "upload.size.threshold";
　　public static final String UPLOAD_REPOSITORY = "upload.repository";
　　public static final String UPLOAD_FILE_BASE_PATH = "upload.file.base.path";
　　public static final String UPLOAD_FILE_SIZE_MAX = "upload.file.size.max";
　　protected int sizeThreshold;
　　protected File repository;
　　protected File fileBasePath;
　　protected long fileSizeMax;
　　@Override
　　public void init() throws ServletException {
　　String sizeThresholdStr = this.getInitParameter(UPLOAD_SIZE_THRESHOLD);
　　if (sizeThresholdStr != null) {
　　this.sizeThreshold = Integer.parseInt(sizeThresholdStr);
　　}
　　String repositoryStr = this.getInitParameter(UPLOAD_REPOSITORY);
　　if (repositoryStr == null) {
　　repositoryStr = getServletContext().getRealPath("/temp");
　　}
　　this.repository = new File(repositoryStr);
　　if (!this.repository.exists()) {
　　this.repository.mkdirs();
　　}
　　String fileBasePathStr = this.getInitParameter(UPLOAD_FILE_BASE_PATH);
　　if (fileBasePathStr == null) {
　　fileBasePathStr = getServletContext().getRealPath("/upload");
　　}
　　this.fileBasePath = new File(fileBasePathStr);
　　if (!this.fileBasePath.exists()) {
　　this.fileBasePath.mkdirs();
　　}
　　String fileSizeMaxStr = this.getInitParameter(UPLOAD_FILE_SIZE_MAX);
　　if (fileSizeMaxStr != null) {
　　this.fileSizeMax = Long.parseLong(fileSizeMaxStr);
　　}
　　}
　　@SuppressWarnings("unchecked")
　　@Override
　　protected void doPost(final HttpServletRequest request, final HttpServletResponse response) throws ServletException, IOException {
　　/*
　　* if not multipart/form-data, it return;
　　*/
　　if (!ServletFileUpload.isMultipartContent(request)) {
　　return;
　　}
　　Map result = new HashMap();
　　/*
　　* create FileItemFactory
　　*/
　　DiskFileItemFactory factory = new DiskFileItemFactory();
　　if (FileUploadServlet.this.sizeThreshold > 0) {
　　factory.setSizeThreshold(FileUploadServlet.this.sizeThreshold);
　　}
　　factory.setRepository(FileUploadServlet.this.repository);
　　/*
　　* create ServletFileUpload
　　*/
　　ServletFileUpload upload = new ServletFileUpload(factory);
　　if (FileUploadServlet.this.fileSizeMax > 0) {
　　upload.setFileSizeMax(FileUploadServlet.this.fileSizeMax);
　　}
　　/*
　　* process FileItems
　　*/
　　String uid = request.getParameter(UPLOAD_ID);
　　File dir = new File(FileUploadServlet.this.fileBasePath, uid);
　　if (!dir.exists()) {
　　dir.mkdirs();
　　}
　　try {
　　List fileItemList = upload.parseRequest(request);
　　for (Iterator iter = fileItemList.iterator(); iter.hasNext();) {
　　FileItem item = (FileItem) iter.next();
　　String fileName = item.getName();
　　if (fileName == null) {
　　continue;
　　}
　　File file = new File(dir, fileName);
　　item.write(file);
　　}
　　result.put("status", 1);
　　} catch (Exception e) {
　　result.put("status", 0);
　　}
　　response.setContentType("application/json");
　　PrintWriter out = response.getWriter();
　　out.write(FileUploadServlet.this.jsonEncode(result));
　　out.flush();
　　}
　　private String jsonEncode(Map result) {
　　StringBuilder sb = new StringBuilder();
　　sb.append("{");
　　for (Iterator> iter = result.entrySet().iterator(); iter.hasNext();) {
　　Map.Entry entry = iter.next();
　　sb.append("\"").append(entry.getKey()).append("\"").append(":").append("\"").append(entry.getValue()).append("\"");
　　if (iter.hasNext()) {
　　sb.append(",");
　　}
　　}
　　sb.append("}");
　　return sb.toString();
　　}
　　}