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

原文地址：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/

转载于:https://www.cnblogs.com/rayy/archive/2010/09/20/4399750.html

Jsp中Uploadify插件的使用（jQuery上传插件）相关推荐

jQuery上传插件Uploadify使用Demo、本地上传（ssm框架下）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 效果: 1. jar包导入: <dependency ...
JQuery上传插件Uploadify使用详解
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
JQuery上传插件Uploadify详解及其中文按钮解决方案
网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键.(以后坚决养成没事就看API ...
工作日志(一)、jquery上传插件uploadify的使用
2019独角兽企业重金招聘Python工程师标准>>> 8月16号,北京,开始了正式的工作,来到公司第一个任务就是用uploadify插件做上传图片和预览功能,uploadify对自 ...
jquery.uploadify php,jQuery上传插件Uploadify的使用方法
Web上传文件是一个很常用的功能,试用过不少上传组件,要么是每次只能选择一个文件,要么是选择了文件后不能取消,直接上传,要么就是对文件.队列等限制支持不佳.总之仅仅是依靠JavaScript的实现不太 ...
JQuery上传插件Uploadify使用详解 http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
jQuery上传插件-uploadify3.1使用说明
uploadify ,简单实用的flash上传组件,兼容性良好. 现已有html5版本. 官方地址:http://www.uploadify.com/ 官方英文文档:http://www.upload ...
cmsv9后台flash上传插件改为百度上传插件
1.修改此文件,(如果没有二次开发,直接替换) 路径:phpcms\modules\attachment\attachments.php 2.添加一个新文件路径:phpcms\modules\att ...
jquery文件上传插件uploadify 讲解
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.名词解释: tracker服务器:中文叫做跟踪器,主要做调度工作,在访问上起负载均衡的作用.(t ...

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

Jsp中Uploadify插件的使用（jQuery上传插件）相关推荐

最新文章

热门文章