`

jquery_upload

阅读更多

一、下载最新版的uploadify
     http://www.uploadify.com/download/
二、将压缩包解压,复制 
    uploadify.css
   uploadify.swf
   swfobjects.js
   jquery.uploadify.v2.1.0.min.js
   cancel.png
   jquery-1.3.2.min.js
   default.css到项目中。
三、在项目中添加三个jar包
    commons-fileupload-1.2.1.jar
    commons-logging-1.0.4.jar
    commons-io.jar
四、在需要使用上传插件的页页头部导入
   

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<!-- 文件上传开始 -->
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<!-- 文件上传结束 -->
 五、编写js文件
$(document).ready(function(){	
	//A文件上传
		$("#uploadFile").uploadify({
		'uploader'       : 'images/uploadify.swf',//指定上传控件的主体文件,默认‘uploader.swf’
		'script'         : 'UploadServlet', //指定服务器端上传处理文件
		'scriptData'     : {'uploadFile':$('#uploadFile').val()},
		'cancelImg'      : 'images/cancel.png',
		'fileDataName'   : 'uploadFile',
		'fileDesc'       : 'jpg文件或jpeg文件或gif文件',  //出现在上传对话框中的文件类型描述
		'fileExt'        : '*.jpg;*.jpeg;*.gif',      //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
		'sizeLimit'      : 512000,           //控制上传文件的大小,单位byte				
		'folder'         : '/uploadImages',
		'queueID'        : 'fileQueueA',
		'auto'           : false,
		'multi'          : true
	});
});		
	
 六、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery 文件上传</title>
</head>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<!-- 文件上传开始 -->
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<!-- 文件上传结束 -->
<body>
<!-- 显示图片 -->
<div id="pic" style="position: absolute; right: 28px; top: 79px; width: 180px; height: 230px; z-index: 2;"></div>
<div class="demo">
<p><strong>Multiple File Upload</strong></p>
<input id="uploadFile" name="uploadFile" type="file" /> <a href="javascript:$('#uploadFile').uploadifyUpload();">Upload Files</a> | <a href="javascript:$('#uploadFile').uploadifyClearQueue();">Clear Queue</a></div>

 <div id="fileQueueA" ></div>
</body>
</html>
 七、servlet代码
package com.aptech.servlet;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.aptech.util.FileUploadUtil;

/**
 * Servlet implementation class UploadServlet
 */
public class UploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
  private static String     path;
    /**
     * Default constructor. 
     */
    public UploadServlet() {
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	@Override
  protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // 生成存放文件的路径
    String savePath = path + "/";

    File f1 = new File(savePath);

    if (!f1.exists()) {
      f1.mkdirs();
    }

    DiskFileItemFactory fac = new DiskFileItemFactory();

    ServletFileUpload upload = new ServletFileUpload(fac);

    upload.setHeaderEncoding("utf-8");

    List 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();

      if (!item.isFormField()) {

        name = item.getName();

        // 新的文件名
        String newUploadFileName = FileUploadUtil.getlnstance().getNewFileName(name);

        // // 扩展名格式:
        //
        // if (name.lastIndexOf(".") >= 0) {
        //
        // extName = name.substring(name.lastIndexOf("."));
        //
        // }

        File saveFile = new File(savePath + newUploadFileName);
        try {

          item.write(saveFile);

        } catch (Exception e) {

          e.printStackTrace();

        }

      }

    }
  }

  @Override
  public void init(ServletConfig config) throws ServletException {
    path = config.getServletContext().getRealPath("/uploadImages");
  }


}
 
八、配置servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>jquery_upload</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>UploadServlet</display-name>
    <servlet-name>UploadServlet</servlet-name>
    <servlet-class>com.aptech.servlet.UploadServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadServlet</servlet-name>
    <url-pattern>/UploadServlet</url-pattern>
  </servlet-mapping>
</web-app>
 
分享到:
评论

相关推荐

    jQuery_file_upload-Servlet上传版本

    《jQuery_file_upload-Servlet上传版本》是一个基于jQuery的文件上传解决方案,特别针对Servlet环境进行了优化,解决了在Java平台上常见的文件上传问题,如进度条显示和中文文件名编码问题。这个解决方案使得开发者...

    jquery_file_upload 可运行

    `jQuery File Upload` 是一个流行的前端文件上传组件,它允许用户在网页上实现优雅、功能丰富的多文件上传功能。这个组件结合了`jQuery`库的强大功能,提供了易于使用的API和高度自定义的界面,适用于各种Web应用...

    drupal_jQueryUpload:这是drupal 7.x的一个模块,添加一个自定义的表单类型叫做'jQuery_upload',然后我们可以通过jQuery上传的方式上传文件

    Drupal jQuery 文件上传这是drupal7的一个模块,添加一个名为'jQuery_upload'的自定义表单类型,然后我们可以通过jQuery上传的方式上传文件必需的如何使用在您的表格中: $form['image_example_image_fid'] = array...

    jQuery_file_upload

    jQuery_file_upload 工作中要实现文件的无刷新上传,当然XmlHttpRequest对象是无法实现文件的上传功能的。google后找到JQuery的fileupload插件,此插件通过一个IFrame并在IFrame中创建一个form表单来实现文件上传;...

    jQuery-File-Upload-Java-master.zip_file jquery ja_jQuery File Up

    "jquery_file_upload_j"指的是使用Java实现的jQuery File Upload,"jquery_fileupload_ja"可能是指日本地区的文档或示例,而"jqueryfileupload_jsp"则暗示了在JSP(JavaServer Pages)环境中使用此插件。 总的来说...

    jquery_图片裁剪

    2. **jQuery插件**:如`jquery_upload_cropv1.2`,这是具体的图片裁剪实现。该插件可能包含预览、拖动、缩放、旋转等功能,允许用户在浏览器上自由调整裁剪区域。它会监听用户的交互,更新裁剪参数,并可能提供...

    jQuery File Upload文件上传插件 v10.32.0.zip

    jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...

    jQuery_Uploadify_3.0_上传插件使用说明

    ### 使用jQuery Uploadify 3.0进行文件上传的详尽指南 #### 一、简介 jQuery Uploadify是一款基于Flash技术的文件上传插件,旨在简化前端文件上传过程,提供友好的用户界面。此插件支持多种文件上传方式,并且可以...

    jquery-upload.min.js和jquery-1.11.0.min.js

    jquery ajax上传组件JS. jquery-upload.min.js和jquery-1.11.0.min.js。 上传小文件图片,文件等非常合适。 详情可参考:http://blog.csdn.net/programmer_sir/article/details/29570935

    jQuery-File-Upload-9.17.0.zip_jquery_;上传组件

    《jQuery File Upload 9.17.0:深入解析与应用指南》 jQuery File Upload 是一个强大、灵活且易于使用的上传组件,它为Web应用程序提供了优雅的文件上传解决方案。这个组件以其优秀的用户体验和丰富的功能集而备受...

    jquery.upload.js

    《使用jQuery.upload.js实现上传功能详解》 在Web开发中,文件上传是一个常见的需求,而jQuery.upload.js是一款基于jQuery的轻量级插件,它极大地简化了文件上传的实现过程,使得开发者能够快速构建功能丰富的文件...

    php上传多个文件blueimp/jQuery-File-Upload大改造

    你需要修改jQuery File Upload的配置,如设置允许上传的文件类型、最大文件大小,以及自定义上传按钮样式等。通过监听`fileuploadadd`, `fileuploadstart`, `fileuploadprogress`, `fileuploaddone`, `...

    JQuery.upload.rar

    《基于jQuery的文件上传插件JQuery.upload详解》 在Web开发中,文件上传功能是不可或缺的一部分,尤其在用户交互丰富的现代网站上。jQuery作为一款轻量级、高性能的JavaScript库,提供了许多便利的API来简化DOM操作...

    JQuery_uploadify_struts2_jsp__ajax多文件上传

    标题中的"JQuery_uploadify_struts2_jsp__ajax多文件上传"涉及到的是一个使用jQuery、uploadify插件、Struts2和JSP技术实现的AJAX多文件上传功能。这个功能允许用户在不刷新页面的情况下,上传多个文件到服务器。 ...

    基于JQUERY的图片处理类

    接着,对于图片裁切,jQuery有多个插件可以实现这一功能,比如“jquery_upload_cropv1.2”。这类插件通常包含两部分:前端展示和用户交互,以及后端接收并处理图片。前端部分,用户可以选择图片,并在预览窗口中进行...

    jquery Ajaxupload应用

    **jQuery AjaxUpload应用详解** AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,...

    upload_jquery_150609_多图片上传.rar

    《使用jQuery实现多图片上传详解》 在网页开发中,图片上传是一项常见的功能,尤其在社交媒体、电商网站以及各类交互式应用中更是不可或缺。本文将详细介绍如何使用jQuery库结合Java后端实现单张或多张图片的上传...

    jQuery File Upload 可跨域的多图片上传

    **jQuery File Upload 知识点详解** `jQuery File Upload` 是一个流行的JavaScript库,它允许用户在网页上实现多文件上传功能,特别是支持跨域上传,这对于现代Web应用来说至关重要。该框架以其易于使用、高度可...

    jQuery File Upload演示与下载

    《jQuery File Upload:全方位解析与实践指南》 在Web开发领域,jQuery库因其简洁的API和强大的功能而深受开发者喜爱。其中,jQuery File Upload插件是处理文件上传问题的一个高效解决方案,尤其在需要进行多文件...

Global site tag (gtag.js) - Google Analytics