使用 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});

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

  1. Java实现一个简单的文件上传案例

    Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘 ...

  2. Python的网络编程[5] -> BOOTP + TFTP + FTP -> 实现一个简单的文件传输流程

    BOOTP-TFTP-FTP 目录 文件传输流程 服务器建立过程 客户端建立过程 1 文件传输流程 / File Transfer Flow 利用BOOTP,TFTP,FTP三种传输协议,建立起客户端 ...

  3. JQuery上传文件插件Uploadify使用笔记

    新工作的第一份任务就是给实现 限制Uploadify 上传文件格式为图片 测试出来报错,选择了非图片文件,提示错误后,再选择其他文件,上传时还是包含了之前清空的非图片文件 最后实现效果的代码是 //上 ...

  4. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  5. [Vue]写一个简单的文件上传控件

    ​这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 ​ 使用Element的u ...

  6. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  7. 【酷Q插件制作】教大家做一个简单的签到插件

    酷Q插件已经有很多了,社区分享一大堆,不过还是自己写才有乐趣,哈哈.不得不吐槽一下,酷Q竟然不更新了,出了个酷Q pro,还收费!!诶.不过这也影响不了咱写插件的心情,今天教大家写一个酷Q签到插件,虽 ...

  8. Qt socket制作一个简单的文件传输系统

    服务器 用qt designer设计出服务器界面: 上代码: Server.pro #------------------------------------------------- # # Pro ...

  9. 【Java】 实现一个简单文件浏览器（1）

    学习Java的Swing的时候写的一个超简单文件浏览器 效果如图: 项目结构: 这里面主要用了两个控件,JTree和JTable 下面先说下左侧的文件树如何实现: 首先是FileTree类,继承于JT ...

随机推荐

  1. 最短路算法详解（Dijkstra/SPFA/Floyd）

    新的整理版本版的地址见我新博客 http://www.hrwhisper.me/?p=1952 一.Dijkstra Dijkstra单源最短路算法,即计算从起点出发到每个点的最短路.所以Dijkst ...

  2. 【2017 ACM-ICPC 亚洲区（西安赛区）网络赛 B】

    [链接]h在这里写链接 [题意] 一个硬币正面朝上的概率为q/p; 抛k次,问你偶数次朝上的概率为多少. [题解] [错的次数] 0 [反思] 在这了写反思 [代码] #include <bit ...

  3. Spring Boot中的缓存支持（一）注解配置与EhCache使用

    Spring Boot中的缓存支持(一)注解配置与EhCache使用 随着时间的积累,应用的使用用户不断增加,数据规模也越来越大,往往数据库查询操作会成为影响用户使用体验的瓶颈,此时使用缓存往往是解决 ...

  4. springboot整合freemarker(转)

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  5. Java BigDecimal的基本使用方法

    1.对于不需要任何准确计算精度的数字可以直接使用float或double,但是如果需要精确计算的结果,则必须使用BigDecimal类 2.运算速度比一般的+.-.*./要快 3.基本方 法描 述  ...

  6. 【习题 5-9 UVA - 1596】Bug Hunt

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] map模拟 map<string,int>记录每个数组的大小 map <pair<string, int&g ...

  7. 如何使用SVN协调代源代码，多人同步开发

    转自linFen原文如何使用SVN协调代源代码,多人同步开发 1.什么是SVN SVN是一种版本管理系统,前身是CVS,是开源软件的基石.即使在沟通充分的情况下,多人维护同一份源代码的一定也会出现混乱 ...

  8. 博客已迁移至http://blog.csdn.net/lujinhong2/

    http://blog.csdn.net/lujinhong2/ 请继续关注

  9. vuejs及相关工具介绍

    轻量级前端mvm的框架 图片.png 对es6语法的简单描述 图片.png 融合了react和angular的优点,组件化和灵活应用和指令,在国际上是一款极有潜力的前端框架. 1.双向绑定 两段相加得 ...

  10. 【u106】3D模型

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一座城市建立在规则的n×m网格上,并且网格均由1×1正方形构成.在每个网格上都可以有一个建筑,建筑由若 ...