使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

时间：2023-11-18 11:56:26

使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

uploadify 插件的 下载和文档地址  点击打开链接

1. jsp的内容

  1. <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  7. <html>
  8. <head>
  9. <basehref="<%=basePath%>">
  10. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
  11. <title>兑换卷查询系统</title>
  12. <linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.21.custom.css"rel="stylesheet"/>
  13. <linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>
  14. <scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script>
  15. <scripttype="text/javascript"src="js/jquery.uploadify-3.1.min.js"></script>
  16. </head>
  17. <style>
  18. </style>
  19. <body>
  20. <form>
  21. <divid="fileQueue"></div>
  22. <h4>提货券类型</h4>
  23. <inputtype="radio"id="typeCode"name="typeCode"value="108"checked="">108</input>
  24. <inputtype="radio"id="typeCode"name="typeCode"value="138">138</input>
  25. </p>
  26. <inputtype="file"name="file_upload"id="file_upload"/>
  27. <p>
  28. <ahref="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a>
  29. <script>
  30. $(function() {
  31. var typeCode ="";
  32. $("#file_upload").uploadify({
  33. 'buttonText'    :   '选择文件',
  34. 'multi'         :   false,
  35. 'swf'           :   'html/uploadify.swf',
  36. 'uploader'      :   '../servlet/Upload',
  37. 'auto'          :   false,
  38. 'onUploadStart' :   function(file) {
  39. //校验
  40. $(":input[name='typeCode']").each(function(){
  41. if ( $(this).attr("checked"))
  42. {
  43. typeCode = ($(this).val());
  44. }
  45. });
  46. $("#file_upload").uploadify("settings", "formData", {'typeCode':typeCode});
  47. }
  48. });
  49. });
  50. </script>
  51. </p>
  52. <!-- <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a> -->
  53. </p>
  54. </form>
  55. </body>
  56. </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服务器端的程序

  1. package com.alcor.inquire.servlet;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.util.Iterator;
  5. import java.util.List;
  6. import java.util.UUID;
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import org.apache.log4j.Logger;
  12. import org.apache.tomcat.util.http.fileupload.FileItem;
  13. import org.apache.tomcat.util.http.fileupload.FileUploadException;
  14. import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
  15. import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
  16. publicclass ImportData extends HttpServlet {
  17. /**
  18. *
  19. */
  20. privatestaticfinallong serialVersionUID = 3387249060639006401L;
  21. privatestaticfinal Logger logger = Logger.getLogger(ImportData.class);
  22. publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
  23. throws ServletException, IOException {
  24. logger.debug("doGet(HttpServletRequest request, HttpServletResponse response)");
  25. String typeCode =""; //兑换卷类型
  26. String savePath = this.getServletConfig().getServletContext().getRealPath("");
  27. savePath = savePath + "/uploads/";
  28. File f1 = new File(savePath);
  29. System.out.println(savePath);
  30. if (!f1.exists()) {
  31. f1.mkdirs();
  32. }
  33. DiskFileItemFactory fac = new DiskFileItemFactory();
  34. ServletFileUpload upload = new ServletFileUpload(fac);
  35. upload.setHeaderEncoding("utf-8");
  36. List<FileItem> fileList = null;
  37. try {
  38. fileList = upload.parseRequest(request);
  39. } catch (FileUploadException ex) {
  40. return;
  41. }
  42. Iterator<FileItem> it = fileList.iterator();
  43. String name = "";
  44. String extName = "";
  45. while (it.hasNext()) {
  46. FileItem item = it.next();
  47. logger.debug(item.getContentType());
  48. if (!item.isFormField()) {
  49. name = item.getName();
  50. long size = item.getSize();
  51. String type = item.getContentType();
  52. logger.debug("文件名："+name+",大小："+size + ",类型：" + type);
  53. if (name == null || name.trim().equals("")) {
  54. continue;
  55. }
  56. //扩展名格式：
  57. if (name.lastIndexOf(".") >= 0) {
  58. extName = name.substring(name.lastIndexOf("."));
  59. }
  60. File file = null;
  61. do {
  62. //生成文件名：
  63. name = UUID.randomUUID().toString();
  64. file = new File(savePath + name + extName);
  65. } while (file.exists());
  66. File saveFile = new File(savePath + name + extName);
  67. try {
  68. item.write(saveFile);
  69. } catch (Exception e) {
  70. e.printStackTrace();
  71. }
  72. }else
  73. {
  74. //获得简单域的名字
  75. String fieldName = item.getFieldName();
  76. if (fieldName.equalsIgnoreCase("typeCode"))
  77. {
  78. //获得简单域的值
  79. String fieldValue = item.getString("UTF-8");
  80. typeCode = fieldValue;
  81. logger.debug("兑换卷类型是："+typeCode);
  82. }
  83. }
  84. }
  85. response.getWriter().print(name + extName);
  86. }
  87. // Process the HTTP Post request
  88. publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
  89. throws ServletException, IOException {
  90. doGet(request, response);
  91. }
  92. }
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的值

  1. $("#file_upload").uploadify("settings", "formData", {'typeCode':typeCode});

相关文章