使用 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. python3 pygame 坦克自动移动

    让坦克自动跑起来 这里需要一个坦克的图. 放到与脚本同一目录. 好,我们就让这个坦克自动跑. 下面上代码: # !/usr/bin/env python # -*- coding:utf-8 -*- ...

  2. jmeter--使用badboy录制脚本

    JMeter录制脚本有多种方法,其中最常见的方法是用第三方工具badboy录制,另外还有JMeter自身设置(Http代理服务器+IE浏览器设置)来录制脚本,但这种方法录制出来的脚本比较多且比较乱,个 ...

  3. 总览：SpringCloud基础结构

    客户端: 1.连接 配置中心2.连接 服务中心3.连接 链路跟踪3.feign调用4.熔断机制5.连接 熔断监控6.swagger2 生成的RESTful-API7.消息总线-rabbitMQ实现 基 ...

  4. 【b091&&z11】潜伏者

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] R国和S国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动. 历尽艰险后,潜伏于S国的R国间谍小 ...

  5. 在 AppDelegate 设置屏幕切换

    //禁止横屏显示 - (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWin ...

  6. html始终让元素居中显示，背景图铺满随便拖动不出界

    首先.写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Cont ...

  7. 利用VS安装项目打包软件的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 昨天摸索了一下,发现使用VS安装项目来打包软件还是挺方便的. 1. 创建一个安装项目工程,如下图: 2. 设置工程属性 ...

  8. Iaas、Paas和Saas的区别

    Iaas: Infrastructure-as-a-service(基础设施即服务),Iaas上购买的一般是主机,用户不光要开发程序,还要考虑搭建系统,维护运行环境,以及怎么容灾,怎么做到高可用,怎么 ...

  9. 强力推荐微信小程序之简易计算器，很适合小白程序员

    原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就 ...

  10. Emmet超详细教程

    Emmet超详细教程 一.总结 一句话总结:用的时候照着用,能提高效率. 1.快捷键如何使用? 需要敲代码的时候把快捷键放到旁边即可.照着敲. 二.Emmet超详细教程 Emmet的前身是大名鼎鼎的Z ...