Javascript使用uploadify来实现多文件上传

使用uploadify来实现文件上传能够客户端判断文件大小、控制文件上传的类型、实现多文件上传、显示进度条等功能，方便易用，兼容性较好。

本例是把dwz中整合uploadify功能抽取出来的，可以进行单独使用，不一定要遭dwz中才能使用，本例只是为了测试，所以使用静态页面进行测试：

话不多说，代码敬上：

rush:js;"> MyHtml.html <Meta http-equiv="content-type" content="text/html; charset=UTF-8">

rush:java;"> package uploadFile;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.diskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UploadFile extends HttpServlet {

@Override
protected void service(HttpServletRequest request,HttpServletResponse response)
throws servletexception,IOException {
super.service(request,response);
}

@Override
protected void doPost(HttpServletRequest req,HttpServletResponse resp)
throws servletexception,IOException {
//临时目录
String basePath = req.getServletContext().getRealPath("upload");
String tempDir = "temp";

File tempFile = new File(basePath + File.sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor +tempDir); 
if (!tempFile.exists()) { 
  tempFile.mkdir(); 
} 

<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>kFileItemFactory dfc = new <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>kFileItemFactory(); 
dfc.setSizeThreshold(1*1024*1024);//设置临界值 
dfc.setRepository(tempFile);//设置临时<a href="https://www.jb51.cc/tag/shangchuanmulu/" target="_blank" class="keywords">上传目录</a> 

ServletFileUpload upload = new ServletFileUpload(dfc); 
upload.setHeaderEncoding("UTF-8");//设置编码 
// 设置<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>最大值,这里设置5Mb,5*1024*1024; 
upload.setSizeMax(5 * 1024 * 1024); 

try { 
  List fileList = upload.parseRequest(req); 
  I<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>tor<FileItem> i<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>tor = fileList.i<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>tor(); 
  while (i<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>tor.hasNext()) { 
    FileItem item = i<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>tor.next(); 
    String fileName = item.getName();//得到<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名 
    if (fileName != null) { 
    //Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.out.println(fileName); 
    //Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.out.println(item.getSize()); 
    File sourceFile = new File(basePath+File.sep<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>tor+fileName); 
    item.write(sourceFile); 
    } 
  } 
} catch (FileUploadException e) { 
  e.<a href="https://www.jb51.cc/tag/printstacktrace/" target="_blank" class="keywords">printstacktrace</a>(); 
} catch (Exception e) { 
  e.<a href="https://www.jb51.cc/tag/printstacktrace/" target="_blank" class="keywords">printstacktrace</a>(); 
} 

//resp.getWriter().print("<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>成功！");

}

@Override
protected void doGet(HttpServletRequest req,IOException {
super.doPost(req,resp);
}
}

4，web.xml配置

rush:xml;">

upLoadify

uploadFile.UploadFile

upLoadify

/servlet/uploadify.do

5，uploadify的提示信息是英文的，为了显示中文的提示信息，将其错误提示方法进行重新，新建errorCode.js放入在resource/dwz/uploadify/scripts文件夹下面，并在页面进行导入这个js,js代码如下：

rush:js;"> var uploadify_onSelectError = function(file,errorCode,errorMsg) { var msgText = "上传失败\n"; switch (errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: //this.queueData.errorMsg = "每次最多上传 " + this.settings.queueSizeLimit + "个文件"; msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: msgText += "文件大小为0"; break; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts; break; default: msgText += "错误代码：" + errorCode + "\n" + errorMsg; } alert(msgText); };

var uploadify_onUploadError = function(file,errorMsg,errorString) {
// 手工取消不弹出提示
if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED
|| errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
return;
}
var msgText = "上传失败\n";
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
msgText += "HTTP 错误\n" + errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
msgText += "上传文件丢失，请重新上传";
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
msgText += "IO错误";
break;
case SWFUpload.UPLOAD_ERROR.Security_ERROR:
msgText += "安全性错误\n" + errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
msgText += "每次最多上传 " + this.settings.uploadLimit + "个";
break;
case SWFUpload.UPLOADERROR.UPLOADFailed:
msgText += errorMsg;
break;
case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
msgText += "找不到指定文件，请重新操作";
break;
case SWFUpload.UPLOAD_ERROR.FILEVALIDATIONFailed:
msgText += "参数错误";
break;
default:
msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n"

errorMsg + "\n" + errorString;
}
alert(msgText);
}
// return parameters;
//}

var uploadify_onUploadSuccess = function(file,data,response) {
alert(file.name + "\n\n上传成功");
};

收工！

原文链接：http://blog.csdn.net/hwt_211/article/details/36888763

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/js/44436.html

uploadifyh上传文件 uploadify多文件上传 uploadify文件上传

上一篇：js以分隔符分隔数组中的元素并转换下一篇：Javascript使用SWFUpload进行多文件

Javascript使用uploadify来实现多文件上传

相关推荐