`

jsp+servlet+jquery 用jquery uploadify最新版本实现多文件上传带进度条

阅读更多
//这是script代码
		<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
		<script type="text/javascript" src="jquery-1.8.0.js"></script>
		<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
		<script>
	$(document).ready(function() {
		$('#file_upload').uploadify( {
			'debug':'true',
			'swf' : 'uploadify/uploadify.swf',//上传按钮的图片,默认是这个flash文件
			'uploader' : 'LoginServlet',//上传所处理的服务器
			'cancelImg' : 'uploadfiy/uploadify-cancel.png',//取消图片
			'method':'post',
			'folder' : '/UploadFile',//上传后,所保存文件的路径
			'queueID' : 'fileQueue',//上传显示进度条的那个div
			'buttonText' : '请选择文件',
			//'onUploadComplete': function(file){alert('The file'+file.name+'finished processing!')},//每个文件上传成功后的函数
			progressData : 'percentage',
			'auto' : false,
			'multi' : true,
			//'onSelect':function(file){
			//alert("文件"+file.name+"被选择了!");
			//}
			//'onQueueComplete' : function(queueData) {
			//	alert(queueData.filesQueued + 'files were successfully!')
			//},//当队列中的所有文件上传成功后,弹出共有多少个文件上传成功
			'onDisable' : function() {
				alert('uploadify is disable');
			},//在调用disable方法时候触发
			//'onCancel':function(){alert('你取消了文件上传')}
			//'onUploadStart' : function(file) {//在调用上传前触发
			//alert('The file ' + file.name + ' is being uploaded.')}
			'onError' : function(errorType,errObj) {
				alert('The error was: ' + errObj.info)
			}

		});
	});
</script>
//这是表单元素
<div id="fileQueue"></div>
		<input id="file_upload" name="file_upload" type="file" multiple="true">
		<p>
			<!-- 加上“*”表示当第一个文件上传成功后,立即上传以后队列中的文件,否则需要自己手动 -->
			<a href="javascript:$('#file_upload').uploadify('upload','*')">上传</a>|
			<a
				href="javascript:$('#file_upload').uploadify('cancel',$('.uploadifive-queue-item').first().data('file'))">取消上传</a>
			<a href="javascript:$('#file_upload').uploadify('cancel','*')">清空所有的上传文件</a>
			<a href="javascript:$('#file_upload').uploadify('stop','*')">暂停</a>
			<!-- 如果填入true则表示禁用上传按钮 -->
			<a href="javascript:$('#file_upload').uploadify('disable','true')">禁用</a>
			<a href="javascript:$('#file_upload').uploadify('debug')">调试</a>
		</p>

 

后台servlet
package com.accp.upload;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

public class LoginServlet extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8;");
		doPost(request, response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to
	 * post.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	@SuppressWarnings("unchecked")
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8;");
		request.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		// 设置接收的编码格式
		request.setCharacterEncoding("UTF-8");
		Date date = new Date();// 获取当前时间
		SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
		SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
		String newfileName = sdfFileName.format(date);// 文件名称
		String fileRealPath = "";// 文件存放真实地址

		String fileRealResistPath = "";// 文件存放真实相对路径

		// 名称 界面编码 必须 和request 保存一致..否则乱码
		String name = request.getParameter("name");

		String firstFileName = "";
		// 获得容器中上传文件夹所在的物理路径
		String savePath = this.getServletConfig().getServletContext()
				.getRealPath("/")
				+ "uploads\\" + newfileName + "\\";
		System.out.println("路径" + savePath + "; name:" + name);
		File file = new File(savePath);
		if (!file.isDirectory()) {
			file.mkdirs();
		}

		try {
			DiskFileItemFactory fac = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(fac);
			upload.setHeaderEncoding("UTF-8");
			// 获取多个上传文件
			List fileList = fileList = upload.parseRequest(request);
			// 遍历上传文件写入磁盘
			Iterator it = fileList.iterator();
			while (it.hasNext()) {
				Object obit = it.next();
				if (obit instanceof DiskFileItem) {
					System.out.println("xxxxxxxxxxxxx");
					DiskFileItem item = (DiskFileItem) obit;

					// 如果item是文件上传表单域
					// 获得文件名及路径
					String fileName = item.getName();
					if (fileName != null) {
						firstFileName = item.getName().substring(
								item.getName().lastIndexOf("\\") + 1);
						String formatName = firstFileName
								.substring(firstFileName.lastIndexOf("."));// 获取文件后缀名
						fileRealPath = savePath + newfileName + formatName;// 文件存放真实地址

						BufferedInputStream in = new BufferedInputStream(item
								.getInputStream());// 获得文件输入流
						BufferedOutputStream outStream = new BufferedOutputStream(
								new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
						Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
						// 上传成功,则插入数据库
						if (new File(fileRealPath).exists()) {
							// 虚拟路径赋值
							fileRealResistPath = sdfFolder.format(date)
									+ "/"
									+ fileRealPath.substring(fileRealPath
											.lastIndexOf("\\") + 1);
							// 保存到数据库
							System.out.println("保存到数据库:");
							System.out.println("name:" + name);
							System.out.println("虚拟路径:" + fileRealResistPath);
						}

					}
				}
			}
		} catch (org.apache.commons.fileupload.FileUploadException ex) {
			ex.printStackTrace();
			System.out.println("没有上传文件");
			return;
		}
		response.getWriter().write("1");
		out.flush();
		out.close();

	}

}



分享到:
评论

相关推荐

    jsp,servlet,jquey最新版的jquery uploadify多文件上传

    这个教程将深入讲解如何结合`jsp`(JavaServer Pages)、`servlet`以及`jQuery`的最新版本来创建一个高效的文件上传系统。 首先,`jQuery`是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、...

    struts2_uploadify带进度条的多文件上传下载

    总之,这个项目实例为使用Struts2和Uploadify实现带进度条的多文件上传及下载功能提供了一个基础模板,对于学习和实践此类功能的开发者来说是一个有价值的参考。通过深入研究和理解这个项目的代码,可以提升对Struts...

    uploadify3 uploadify2 jsp 文件上传 进度条

    Uploadify是一款基于Flash和jQuery的文件上传组件,它允许用户通过直观的拖放界面进行多文件上传,并且在上传过程中显示进度条,提高了交互性和易用性。Uploadify2和Uploadify3是该插件的两个不同版本,主要区别在于...

    JQuery Uploadify 基于JSP的无刷新上传实例:

    本文将深入解析JQuery Uploadify的使用方法,并结合实际案例,详细介绍如何在JSP项目中实现无刷新上传。 首先,Uploadify是一个基于jQuery的插件,它利用Flash或HTML5的技术实现了文件的异步上传,即无刷新上传。该...

    JSP使用文件上传插件uploadify示例

    在本示例中,我们将关注"JSP使用文件上传插件uploadify"的主题,这是一个利用uploadify插件实现AJAX文件上传的教程。uploadify是一款流行且美观的JavaScript插件,它为网页提供了流畅的多文件上传体验。 首先,我们...

    jquery上传控件 Uploadify 实例 .net,jsp,php三种版本

    Uploadify是一款轻量级的前端文件上传解决方案,它通过Flash和HTML5技术实现了多文件同时上传的功能,并提供了进度条显示、预览、取消上传等特性。Uploadify的亮点在于其灵活性,可以轻松地与各种后端框架集成,实现...

    Jsp中Uploadify插件的使用(jQuery上传插件)(转)

    Uploadify是一款基于jQuery的文件上传插件,它提供了一种优雅的方式来处理文件上传,允许用户在上传过程中看到进度条,同时支持批量上传和自定义事件。在JSP开发中,使用Uploadify可以大大提升用户体验,下面我们将...

    最简洁,最好用的JQuery附件上传控件Uploadify使用示例

    总之,Uploadify是JQuery环境下实现高效文件上传的优秀工具。通过配置其各种选项和事件,你可以轻松地将其集成到MyEclipse JSP JAVA项目中,提供良好的用户体验。TestUploadify这个文件可能是包含示例代码或测试数据...

    显示上传的进度的jquery上传工具

    Uploadify是一款基于jQuery的文件上传插件,它不仅支持多文件选择,还能在上传过程中显示进度条,给用户带来流畅的交互体验。这个插件利用了Flash技术(在老版本中)或HTML5的File API(在新版本中),实现异步上传...

    jsp uploadify_v3.2 代码

    `jsp uploadify_v3.2` 是一个基于Java Servlet和JavaScript的文件上传解决方案,它允许用户在网页上实现多文件的快速、便捷上传。在这个版本中,`uploadify`库结合了JSP(JavaServer Pages)技术,为Web开发者提供了...

    jsp版jquery上传控件

    【jQuery Uploadify】是一款在JSP环境中广泛使用的前端文件上传插件,它基于jQuery库,提供了用户友好的界面和高效的操作体验。这个控件的主要特点是简单易用、功能强大,支持单个或多个文件的上传,并且具备在...

    uploadify上传

    **标题:“uploadify上传”** **关键词:jsp, uploadify, 文件上传** **正文:** ...通过深入理解`uploadify`的工作原理和JSP的文件处理机制,我们可以有效地利用这个插件实现高效、友好的文件上传功能。

    Uploadify结合Struts2上传demo

    `Uploadify`是一个流行的JavaScript插件,它允许用户通过Ajax方式实现文件的批量上传,提供了友好的用户体验,包括进度条显示、多文件选择等特性。而`Struts2`则是一个强大的Java Web框架,用于构建可维护性高、结构...

    uploadify完整demo(myeclipse+weblogic)

    Uploadify依赖jQuery,利用其强大的DOM操作和事件处理能力,实现了文件选择、上传状态跟踪等功能。 3. **MyEclipse**: MyEclipse是一款强大的Java集成开发环境,它是Eclipse的扩展,特别适合于Java Web和Java EE...

    java jsp使用 uploadifive 上传

    以上就是使用Java JSP和Uploadifive实现文件上传的基本流程。需要注意的是,实际应用中还需考虑错误处理、权限控制、文件命名规则、存储策略等更多细节。通过这种方式,你可以为用户提供一个高效且友好的文件上传...

    jsuploadify_jsp_

    【标题】:“jsuploadify_jsp_”是一个关于在JSP中使用uploadify插件进行文件上传的技术主题。Uploadify是一款流行的JavaScript插件,它允许用户通过Ajax方式实现多文件快速上传,极大地优化了传统的文件上传体验。 ...

    图片上传插件jquery.uploadify详解

    应从官方或其他可靠的渠道下载最新版本的jquery.uploadify插件,并确保其兼容当前使用的jQuery版本及其他浏览器环境。 总的来说,jquery.uploadify插件提供的功能丰富,配置灵活,能够帮助开发者快速实现Web页面中...

    jsp添加图片水印程序

    本文将详细讲解如何使用JSP技术结合Java后端和jQuery的Uploadify插件实现图片的水印功能。 首先,我们来看标题"jsp添加图片水印程序"。JSP(JavaServer Pages)是Java的一种动态网页技术,它允许开发者在HTML页面中...

    jspUploadProgress_jsp_

    本文将详细解析"jspUploadProgress_jsp_"这个项目,它是一个实现简单批量文件上传功能的JSP应用,具备指定上传文件数量、文件大小限制以及实时上传进度显示的功能,并且支持为上传的图片添加描述文字。 1. **批量...

    jquery.uploadifyPjsp.zip_Java编程_Java_

    在IT行业中,jQuery Uploadify是一个广泛使用的JavaScript库,它允许用户在网页上实现方便、美观的文件上传功能。这个框架整合了jQuery与JSP(JavaServer Pages)技术,为Java开发者提供了一种高效且易于集成的文件...

Global site tag (gtag.js) - Google Analytics