使用 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. （转）ORA-00257归档日志写满的解决方法

    转自:http://www.cnblogs.com/xwdreamer/p/3804509.html 背景: 在前一篇博客中我们提到了如何启动或关闭oracle的归档(ARCHIVELOG)模式,在我 ...

  2. Python 极简教程（二）编码工具

    Python 的编码工具很多.目前最流行的是 pycharm,关于 pycharm 的安装使用请参考 PyCharm安装使用教程. 而学习过程中,我觉得最好用的,还是 Python 自带的练习工具 I ...

  3. 洛谷——P2241 统计方形（数据加强版）

    https://www.luogu.org/problem/show?pid=2241 题目背景 1997年普及组第一题 题目描述 有一个n*m方格的棋盘,求其方格包含多少正方形.长方形 输入输出格式 ...

  4. easyui datagrid editor checkbox 单击事件

    Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...

  5. Hadoop读书笔记（一）Hadoop介绍

    1.Hadoop是什么? 适合大数据的分布式与计算平台. HDFS:Hadoop Distributed File System 分布式文件系统  MapReduce:并行计算框架 2.HDFS的架构 ...

  6. Vertx简介

    今天看了一篇很不错的关于Vertx的简介,转载下. 原文链接:http://www.csdn.net/article/2015-12-21/2826533?utm_source=tuicool& ...

  7. [Ramda] Getter and Setter in Ramda & lens

    Getter on Object: 1. prop: R.prop(}); //=> 100 R.prop('x', {}); //=> undefined 2. props: R.pro ...

  8. js课程 2-8 js内置对象有哪些

    js课程 2-8 js内置对象有哪些 一.总结 一句话总结:JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象. 1.js常用对象有哪些? ...

  9. gvim 窗口最大化启动

    此文来源于vimer的程序世界 首先需要 gvimfullscreen.dll 文件  下载gvimfullscreen.dll 下载源码 之后只需要在vimrc中配置如下代码就可以按F11使Vim全 ...

  10. MFC只允许进行一个实例

    APP---InitInstance() 放在所有程序运行前 //只允许运行一个实例  BOOL bfound = FALSE; hmutex = CreateMutex(NULL,TRUE,&quo ...