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

2022-10-20,,,,

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

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

1. jsp的内容

    <%@ 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>
    <basehref="<%=basePath%>">
    <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
    <title>兑换卷查询系统</title>
    <linktype="text/css"href="css/ui-lightness/jquery-ui-1.8.21.custom.css"rel="stylesheet"/>
    <linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>
    <scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script>
    <scripttype="text/javascript"src="js/jquery.uploadify-3.1.min.js"></script>
    </head>
    <style>
    </style>
    <body>
    <form>
    <divid="fileQueue"></div>
    <h4>提货券类型</h4>
    <inputtype="radio"id="typeCode"name="typeCode"value="108"checked="">108</input>
    <inputtype="radio"id="typeCode"name="typeCode"value="138">138</input>
    </p>
    <inputtype="file"name="file_upload"id="file_upload"/>
    <p>
    <ahref="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>
<%@ 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服务器端的程序

    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;
    publicclass ImportData extends HttpServlet {
    /**
    *
    */
    privatestaticfinallong serialVersionUID = 3387249060639006401L;
    privatestaticfinal Logger logger = Logger.getLogger(ImportData.class);
    publicvoid 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
    publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    doGet(request, response);
    }
    }
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的值

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

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

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

下载本文的Word格式文档,以方便收藏与打印。