jquery上传图片插件,jquery图片上传demo

jQuery插件ocupload的问题！我使用ocupload做图片上传，发现当重复上传同一图片，插件就会失效。

对的，不只是上传图片时会出现这个问题，上传任何文件时都会有这个问题，就是：连续两次上传文件名时，页面不会发送请求。

成都创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十载时间我们累计服务了上千家以及全国政企客户，如阳台护栏等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致表扬。

后来试了下火狐不会这样，只有谷歌会这样……不知道咋解决，大家有好办法吗？

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

eclipes上传图片的插件叫什么名字

eclipes上传图片的插件是Uploadify插件，Uploadify是来自国外的一款优秀jQuery插件，主要功能是批量上传文件，此插件在项目中已被广泛之用。

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批量上传图片插件uploadify 的例子 可以用的

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" 

html xmlns="" 

meta http-equiv='Content-Type' content='text/html; charset=utf-8' /

titleFile upload /title 

link rel="Stylesheet" href="js/Plug-in/jquery.uploadify/uploadify.css" / 

script type="text/javascript" src="js/Plug-in/jquery.uploadify/jquery-1.3.2.min.js"/script 

script type="text/javascript" src="js/Plug-in/jquery.uploadify/swfobject.js"/script 

script type="text/javascript" src="js/Plug-in/jquery.uploadify/jquery.uploadify.v2.1.0.min.js"/script 

script type="text/javascript" 

$(document).ready(function() { 

$("#uploadify").uploadify({ 

'uploader': 'js/Plug-in/jquery.uploadify/uploadify.swf', 

'script': 'uploadify.php', 

'cancelImg': 'js/Plug-in/jquery.uploadify/cancel.png', 

'folder': 'uploadfile', 

'queueID': 'fileQueue', 

'auto': false, 

'multi': true, 

}); 

}); 

/script 

/head 

body 

MAX: 20M

/BR

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

a href="javascript:$('#uploadify').uploadifyUpload()"Upload/a| a href="javascript:$('#uploadify').uploadifyClearQueue()"cancel/a 

div id="fileQueue"/div 

/body 

/html

后台 uploadify.php

?php

/*

Uploadify v2.1.0

Release Date: August 24, 2009

Copyright (c) 2009 Ronnie Garcia, Travis Nickels

Permission is hereby granted, free of charge, to any person obtaining a copy

of this software and associated documentation files (the "Software"), to deal

in the Software without restriction, including without limitation the rights

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the Software is

furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in

all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

THE SOFTWARE.

*/

if (!empty($_FILES)) {

$tempFile = $_FILES['Filedata']['tmp_name'];

$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';

$targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];

$targetFile =  iconv("utf-8","gbk",$targetFile);

move_uploaded_file($tempFile,$targetFile);

echo "1";

}

?