使用 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. Loadrunner--Analysis网页细分图

    续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场景(Controller),现在,终于到了LoadRunner性能测试结果分析(An ...

  2. (转)Windows2008优化IIS7.5支持10万个同时请求的配置方法

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. 在运行中cmd后,输入:C:\Window ...

  3. eclipse在线安装超级炫酷黑色主题

    Darkest Dark Theme插件: 点击菜单栏 Help --> Eclipse Marketplace,输出Darkest Dark Theme进行搜索,如下图: 本主题有17套编辑器 ...

  4. python使用matplotlib画图

    python使用matplotlib画图 matplotlib库是python最著名的画图库.它提供了一整套和matlab类似的命令API.十分适合交互式地进行制图. 先介绍了怎样使用matplotl ...

  5. SetForegroundWindow

    SetForegroundWindow 函数功能:该函数将创建指定窗口的线程设置到前台,并且激活该窗口.键盘输入转向该窗口,并为用户改各种可视的记号.系统给创建前台窗口的线程分配的权限稍高于其他线程. ...

  6. [Redis专辑][1]ubuntu12.04下安装php-redis的方法和步骤

    首次公布路径:phpredis的安装 非常久非常久没有写博文了,好多博文都没有整理完成,今天才抽时间整理完这一篇博文,希望能对大家有一定的帮助 首先对redis做个简单的介绍: Redis 是全然开源 ...

  7. [PReact] Reduce the Size of a React App in Two Lines with preact-compat

    Not every app is greenfield, and it would be a shame if existing React apps could not benefit from t ...

  8. [TypeStyle] Add type safety to CSS using TypeStyle

    TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript dev ...

  9. Eclipse 快捷键大全 分类： C_OHTERS 2014-06-01 13:05 332人阅读 评论(0) 收藏

      精选常用: 1.  ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如a ...

  10. ConcurrentLinkedQueue的实现原理分析

    1.    引言 在并发编程中我们有时候需要使用线程安全的队列.如果我们要实现一个线程安全的队列有两种实现方式一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同 ...