jquery上傳圖片插件,jquery圖片上傳demo

jQuery插件ocupload的問(wèn)題！我使用ocupload做圖片上傳，發(fā)現(xiàn)當(dāng)重復(fù)上傳同一圖片，插件就會(huì)失效。

對(duì)的，不只是上傳圖片時(shí)會(huì)出現(xiàn)這個(gè)問(wèn)題，上傳任何文件時(shí)都會(huì)有這個(gè)問(wèn)題，就是：連續(xù)兩次上傳文件名時(shí)，頁(yè)面不會(huì)發(fā)送請(qǐng)求。

成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如陽(yáng)臺(tái)護(hù)欄等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致表?yè)P(yáng)。

后來(lái)試了下火狐不會(huì)這樣，只有谷歌會(huì)這樣……不知道咋解決，大家有好辦法嗎？

有哪些好用的 jQuery 圖片上傳插件

1、uploadify

它是針對(duì)jQuery的免費(fèi)文件上傳插件，可以輕松將單個(gè)或多個(gè)文件上傳到網(wǎng)站上，可控制并發(fā)上傳的文件數(shù)，通過(guò)接口參數(shù)和CSS控制外觀。Web服務(wù)器需支持flash和后端開(kāi)發(fā)語(yǔ)言。

2、FancyUpload

它是一個(gè)由CSS和XHTML編寫(xiě)樣式的Ajax文件上傳工具，安裝簡(jiǎn)便，服務(wù)器獨(dú)立，由MooTools模塊驅(qū)動(dòng)，可以在任何現(xiàn)代瀏覽器上使用。

3、Aurigma Upload Suite(Image Uploader)

這是一個(gè)不限大小，不限格式的文件/圖片批量上傳工具，是收費(fèi)控件。它支持云端存儲(chǔ)和客戶端文件處理，支持?jǐn)帱c(diǎn)續(xù)傳，穩(wěn)定可靠。從8.0.8開(kāi)始，Image Uploader將名稱改為"Aurigma Upload Suite"。

eclipes上傳圖片的插件叫什么名字

eclipes上傳圖片的插件是Uploadify插件，Uploadify是來(lái)自國(guó)外的一款優(yōu)秀jQuery插件，主要功能是批量上傳文件，此插件在項(xiàng)目中已被廣泛之用。

jquery 上傳文件插件uploadify jsp版本

1、下載最新的zip壓縮包

2、從其中提取文件。

下載插件安裝包后，可以看到官方給出的例子。里面文件夾的幾個(gè)主要文件：jquery.uploadify.js(完成上傳功能的腳本文件，在調(diào)用頁(yè)面引

用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控件的主體文件，flash控件)、upload.php(服務(wù)器端處

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

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

3、導(dǎo)入default.css,uploadify.css，jQuery腳本，swfobject腳本和Uploadify插件。并且添加調(diào)用插件使用$，在您的網(wǎng)頁(yè)的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',//后臺(tái)處理的請(qǐng)求

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

'folder'?????????:?'uploads',//您想將文件保存到的路徑

'queueID'????????:?'fileQueue',//與下面的id對(duì)應(yīng)

'queueSizeLimit'??:1,

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

'fileExt'?:?'*.rar;*.zip',?//控制可上傳文件的擴(kuò)展名，啟用本項(xiàng)時(shí)需同時(shí)聲明fileDesc

'auto'???????????:?false,

'multi'??????????:?true,

'simUploadLimit'?:?2,

'buttonText'?????:?'BROWSE'

});

/script????/head

body

div?id="fileQueue"/div

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

a?href="javascript:jQuery('#uploadify').uploadifyUpload()"開(kāi)始上傳/anbsp;

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

/body

/html

4、后臺(tái)處理的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;

}

//擴(kuò)展名格式：?

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

后臺(tái)?uploadify.php

?php

Uploadify?v2.1.0

Release?Date:?August?24,?2009

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";

}

分享標(biāo)題：jquery上傳圖片插件,jquery圖片上傳demo
鏈接URL：http://chinadenli.net/article45/dsiosei.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、域名注冊(cè)、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容