最近工作中碰到上傳文件插件使用問題：在工作中碰到app嵌套html5頁面中使用上傳文件問題，因為之前使用的是stream上傳插件(http://www.twinkling.cn/)，但是該插件跨域傳輸出現問題，無法傳輸成功，經過幾次調試都無法解決跨域，然后我就換了個插件uploadify，一開始用的flash版本，但是此版本不支持在app中使用，於是就想到了用html5版本的，感覺笨死了，這個問題整了時間有點長了，下面開始說html版本的使用
首先，頁面代碼：
后台代碼：
@SuppressWarnings({ "unchecked", "rawtypes" })
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 獲得參數
String timestamp = request.getParameter("timestamp");
String token = request.getParameter("token");
System.out.println(timestamp);
System.out.println(token);
// 獲得文件
String savePath = this.getServletConfig().getServletContext()
.getRealPath("");
savePath = savePath + "/uploads/";
File f1 = new File(savePath);
System.out.println(savePath);
if (!f1.exists()) {
f1.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
System.out.println(ex.getMessage());
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
System.out.println(size + " " + type);
if (name == null || name.trim().equals("")) {
continue;
}
// 擴展名格式：
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
name = UUID.randomUUID().toString();
do {
// 生成文件名：
name = UUID.randomUUID().toString();
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
response.getWriter().print(name + extName);
}
解決跨域問題主要是
第一：在web.xml中配置
<!-- 解決uploadify插件跨域 -->
<filter>
<filter-name>cors</filter-name>
<filter-class>cn.qtone.eduoa.web.filter.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 解決uploadify插件跨域 -->
第二：寫過濾器SimpleCORSFilter
