Jsp中Uploadify插件的使用（jQuery上传插件）

最新推荐文章于 2017-09-30 15:39:13 发布

hg344700

最新推荐文章于 2017-09-30 15:39:13 发布

阅读量2.6k

点赞数

分类专栏： Java 文章标签： jquery jsp stylesheet string file myeclipse

Java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

原文地址：Jsp中Uploadify插件的使用（jQuery上传插件） 作者：项海军

该插件使用的是jQuery，Flash和后端（您选择哪种语言实现的上传）脚本的组合。

如何来使用它？

——执行此插件非常简单，只需在jQuery函数中调用即可，先快速让

此功能跑起来。

1、下载最新的zip压缩包 http://www.uploadify.com

2、从其中提取文件。

下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处理文件，官方仅提供了php版的)。

下面我使用的是在MyEclipse部署的java版。注意：需要加入三个commons.jar包。

3、导入default.css,uploadify.css，jQuery脚本，swfobject脚本和Uploadify插件。并且添加调用插件使用$，在您的网页的<head>部分ready事件：

<%@ page language="java" contentType="text/html; charset=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">

<html>

<head>

<title>Upload</title>

$(document).ready(function() {

$("#uploadify").uploadify({

'uploader' : 'uploadify.swf',

'script' : 'servlet/Upload',//后台处理的请求

'cancelImg' : 'images/cancel.png',

'folder' : 'uploads',//您想将文件保存到的路径

'queueID' : 'fileQueue',//与下面的id对应

'queueSizeLimit' :1,

'fileDesc' : 'rar文件或zip文件’,

'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc

'auto' : false,

'multi' : true,

'simUploadLimit' : 2,

'buttonText' : 'BROWSE'

});

</script> </head>

<body>

<p>

<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>

</p>

</body>

</html>

4、后台处理的upload.java

package com.xzit.upload;

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.commons.fileupload.FileItem;

import org.apache.commons.fileupload.FileUploadException;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

@SuppressWarnings("serial")

public class Upload extends HttpServlet {

@SuppressWarnings("unchecked")

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

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

long size = item.getSize();

String type = item.getContentType();

System.out.println(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();

}

response.getWriter().print(name + extName);

}

5、配置处理的servlet

Web.xml文件

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet-name>upload</servlet-name>

<servlet-class>com.xzit.upload.Upload</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>upload</servlet-name>

<url-pattern>/servlet/Upload</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

到这里就ok了哦。

下篇将对插件的可选参数作详细地介绍，也可参考官方的参考文档。

http://www.uploadify.com/documentation/

hg344700

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Jsp中Uploadify插件的使用（jQuery上传插件）

原文地址：Jsp中Uploadify插件的使用（jQuery上传插件）作者：项海军该插件使用的是jQuery，Flash和后端（您选择哪种语言实现的上传）脚本的组合。如何来使用它？ ——执行此插件非常简单，只需在jQuery函数中调用即可，先快速让此功能跑起来。1、下载最新的zip压缩包http://www.uploadify.com2、从其中提取文件。下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，
复制链接

扫一扫

专栏目录