jquery的上传插件,jQuery上传文件

DWZ中怎样整合JQuery的ajaxFileUpload上传插件

jQuery插件AjaxFileUpload可以实现ajax文件上传，需要jQuery库文件和ajaxfileupload.js

创新互联是专业的仙游网站建设公司，仙游接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行仙游网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一.引入部分

script type="text/javascript" src="jquery.js"/script

script type="text/javascript" src="ajaxfileupload.js"/script

二.body部分

img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/

input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/

注意：使用AjaxFileUpload插件上传文件可不需要form

form name="form" action="" method="POST" enctype="multipart/form-data"

……相关html代码……

/form

三.js部分

function changImg(){

$.ajaxFileUpload

(

{

url:'XXX.action', //上传文件的服务端

secureuri:false, //是否启用安全提交

dataType: 'text', //数据类型

fileElementId:'touxiang', //表示文件域ID

//提交成功后处理函数 html为返回值，status为执行的状态

success: function(html,status)

{

},

//提交失败处理函数

error: function (html,status,e)

{

}

}

)

}

四.原理

利用jQuery的选择器获得file文件上传框中的文件路径值，然后动态的创建一个iframe，并在里面建立一个新的file 文件框，提供post方式提交到后台。最后，返回结果到前台。

五.总结

使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用，由于其简单易用，因些这个插件相比其它文件上传插件使用人数最多，非常值得推荐。

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.完成。

有哪些好用的 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"。