jquery上传插件,jQuery上传文件

jquery上传插件uploadify怎么添加类似onClick事件

设置自动上传

温岭网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

auto:

false

添加按钮input

type="button"

value="上传"

class="btn

btn-primary

btn-small"

onclick="javascript:$('#uploadify').uploadifyUpload()"

/

$('#uploadify')是上传控件的id

不知道这是不是你想要的

有哪些好用的 jQuery 图片上传插件

1、uploadify

它是针对jQuery的免费文件上传插件，可以轻松将单个或多个文件上传到网站上，可控制并发上传的文件数，通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。

2、FancyUpload

它是一个由CSS和XHTML编写样式的Ajax文件上传工具，安装简便，服务器独立，由MooTools模块驱动，可以在任何现代浏览器上使用。

3、Aurigma Upload Suite(Image Uploader)

这是一个不限大小，不限格式的文件/图片批量上传工具，是收费控件。它支持云端存储和客户端文件处理，支持断点续传，稳定可靠。从8.0.8开始，Image Uploader将名称改为"Aurigma Upload Suite"。

jquery 上传文件插件uploadify jsp版本

1、下载最新的zip压缩包

2、从其中提取文件。

下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引

用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处

理文件，官方仅提供了php版的)。

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

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

base href="%=basePath%"

titleUpload/title

!--装载文件--

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="scripts/jquery-1.3.2.min.js"/script

script type="text/javascript" src="scripts/swfobject.js"/script

script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js"/script

!--ready事件--

script type="text/javascript"

$(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

div id="fileQueue"/div

input type="file" name="uploadify" id="uploadify" /

p

a href="javascript:jQuery('#uploadify').uploadifyUpload()"开始上传/anbsp;

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;

}

IteratorFileItem 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=""

xmlns:xsi=""

xsi:schemaLocation="

" 

servlet

servlet-nameupload/servlet-name

servlet-classcom.xzit.upload.Upload/servlet-class

/servlet

servlet-mapping

servlet-nameupload/servlet-name

url-pattern/servlet/Upload/url-pattern

/servlet-mapping

welcome-file-list

welcome-fileindex.jsp/welcome-file

/welcome-file-list

/web-app

6.完成。