使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
uploadify 插件的 下载和文档地址 点击打开链接
1. jsp的内容
- <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <basehref="<%=basePath%>">
- <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
- <title>兑换卷查询系统</title>
- <linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.21.custom.css"rel="stylesheet"/>
- <linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>
- <scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script>
- <scripttype="text/javascript"src="js/jquery.uploadify-3.1.min.js"></script>
- </head>
- <style>
- </style>
- <body>
- <form>
- <divid="fileQueue"></div>
- <h4>提货券类型</h4>
- <inputtype="radio"id="typeCode"name="typeCode"value="108"checked="">108</input>
- <inputtype="radio"id="typeCode"name="typeCode"value="138">138</input>
- </p>
- <inputtype="file"name="file_upload"id="file_upload"/>
- <p>
- <ahref="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a>
- <script>
- $(function() {
- var typeCode ="";
- $("#file_upload").uploadify({
- 'buttonText' : '选择文件',
- 'multi' : false,
- 'swf' : 'html/uploadify.swf',
- 'uploader' : '../servlet/Upload',
- 'auto' : false,
- 'onUploadStart' : function(file) {
- //校验
- $(":input[name='typeCode']").each(function(){
- if ( $(this).attr("checked"))
- {
- typeCode = ($(this).val());
- }
- });
- $("#file_upload").uploadify("settings", "formData", {'typeCode':typeCode});
- }
- });
- });
- </script>
- </p>
- <!-- <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a> -->
- </p>
- </form>
- </body>
- </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>兑换卷查询系统</title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> <link href="css/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script> </head> <style> </style> <body> <form> <div id="fileQueue"></div> <h4>提货券类型</h4> <input type="radio" id="typeCode" name="typeCode" value="108" checked="">108</input> <input type="radio" id="typeCode" name="typeCode" value="138">138</input> </p> <input type="file" name="file_upload" id="file_upload" /> <p> <a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a> <script> $(function() { var typeCode =""; $("#file_upload").uploadify({ 'buttonText' : '选择文件', 'multi' : false, 'swf' : 'html/uploadify.swf', 'uploader' : '../servlet/Upload', 'auto' : false, 'onUploadStart' : function(file) { //校验 $(":input[name='typeCode']").each(function(){ if ( $(this).attr("checked")) { typeCode = ($(this).val()); } }); $("#file_upload").uploadify("settings", "formData", {'typeCode':typeCode}); } }); }); </script> </p> <!-- <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a> --> </p> </form> </body> </html>
2.java服务器端的程序
- package com.alcor.inquire.servlet;
- import java.io.File;
- import java.io.IOException;
- import java.util.Iterator;
- import java.util.List;
- import java.util.UUID;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.log4j.Logger;
- import org.apache.tomcat.util.http.fileupload.FileItem;
- import org.apache.tomcat.util.http.fileupload.FileUploadException;
- import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
- import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
- publicclass ImportData extends HttpServlet {
- /**
- *
- */
- privatestaticfinallong serialVersionUID = 3387249060639006401L;
- privatestaticfinal Logger logger = Logger.getLogger(ImportData.class);
- publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- logger.debug("doGet(HttpServletRequest request, HttpServletResponse response)");
- String typeCode =""; //兑换卷类型
- 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<FileItem> fileList = null;
- try {
- fileList = upload.parseRequest(request);
- } catch (FileUploadException ex) {
- return;
- }
- Iterator<FileItem> it = fileList.iterator();
- String name = "";
- String extName = "";
- while (it.hasNext()) {
- FileItem item = it.next();
- logger.debug(item.getContentType());
- if (!item.isFormField()) {
- name = item.getName();
- long size = item.getSize();
- String type = item.getContentType();
- logger.debug("文件名:"+name+",大小:"+size + ",类型:" + type);
- if (name == null || name.trim().equals("")) {
- continue;
- }
- //扩展名格式:
- if (name.lastIndexOf(".") >= 0) {
- extName = name.substring(name.lastIndexOf("."));
- }
- File file = null;
- 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();
- }
- }else
- {
- //获得简单域的名字
- String fieldName = item.getFieldName();
- if (fieldName.equalsIgnoreCase("typeCode"))
- {
- //获得简单域的值
- String fieldValue = item.getString("UTF-8");
- typeCode = fieldValue;
- logger.debug("兑换卷类型是:"+typeCode);
- }
- }
- }
- response.getWriter().print(name + extName);
- }
- // Process the HTTP Post request
- publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doGet(request, response);
- }
- }
package com.alcor.inquire.servlet; import java.io.File; import java.io.IOException; import java.util.Iterator; import java.util.List; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger; import org.apache.tomcat.util.http.fileupload.FileItem; import org.apache.tomcat.util.http.fileupload.FileUploadException; import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory; import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload; public class ImportData extends HttpServlet { /** * */ private static final long serialVersionUID = 3387249060639006401L; private static final Logger logger = Logger.getLogger(ImportData.class); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { logger.debug("doGet(HttpServletRequest request, HttpServletResponse response)"); String typeCode =""; //兑换卷类型 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<FileItem> fileList = null; try { fileList = upload.parseRequest(request); } catch (FileUploadException ex) { return; } Iterator<FileItem> it = fileList.iterator(); String name = ""; String extName = ""; while (it.hasNext()) { FileItem item = it.next(); logger.debug(item.getContentType()); if (!item.isFormField()) { name = item.getName(); long size = item.getSize(); String type = item.getContentType(); logger.debug("文件名:"+name+",大小:"+size + ",类型:" + type); if (name == null || name.trim().equals("")) { continue; } //扩展名格式: if (name.lastIndexOf(".") >= 0) { extName = name.substring(name.lastIndexOf(".")); } File file = null; 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(); } }else { //获得简单域的名字 String fieldName = item.getFieldName(); if (fieldName.equalsIgnoreCase("typeCode")) { //获得简单域的值 String fieldValue = item.getString("UTF-8"); typeCode = fieldValue; logger.debug("兑换卷类型是:"+typeCode); } } } response.getWriter().print(name + extName); } // Process the HTTP Post request public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3.jsp代码中 如下代码是关键,否则服务端无法获取radio的值
- $("#file_upload").uploadify("settings", "formData", {'typeCode':typeCode});