求一款jQuery或js多圖上傳插件

你好,你的問(wèn)題其實(shí)包含三個(gè)方面。

作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。

一個(gè)是前端異步上傳還是同步上傳，關(guān)于異步上傳，方案有很多種，ajax或者iframe。這類插件也很多，如Uploadify,但一般比較大，個(gè)人覺(jué)得有點(diǎn)殺雞用牛刀的感覺(jué),給你推薦一款筆者自己寫的的插件,jquery.attach.js,本身才3kb不到,支持zip/rar/mp4/mp4/png/jpg/bmp等。下載地址

另一個(gè)是多圖上傳，多圖可以上傳本質(zhì)上是多個(gè)單圖上傳問(wèn)題，像這種，kindeditor 的多圖上傳插件，百度的uedit 多圖上傳插件，都可以解決問(wèn)題，swfupload也可以。

最后是后端處理程序，如果你是thinkphp 寫的，可以用thinkphp 的upload 包。

希望對(duì)你有幫助

用JQuery實(shí)現(xiàn)一行多圖輪播，是單擊一下一張圖片輪播，不是一下一行圖片輪播，給個(gè)例子，跪求

!doctype?html??

html??

head??

meta?charset="UTF-8"??

titleDocument/title??

style??

*{padding:?0;margin:?0;??}??

ul?li{list-style-type:?none}??

.gameTab{??width:?1100px;??height:?150px;??overflow:?hidden;??margin:?50px?auto;position:?relative;}??

.gameTab?ul{??width:?7680px;??overflow:?hidden;??}??

.gameTab?ulli{???width:?220px;???height:150px;?float:?left;text-align:?center;}??

.gameTab?ulli:hover{opacity:?0.5}?

.prev,.next{position:?absolute;top:?50%;transform:translate(0,-50%);padding:?5px;background:?red;z-index:?99;text-decoration:?none;color:?#fff;

}

.prev{left:?0;}

.next{right:?0;}

/style??

/head??

body??

div??

a?href="javascript:;"前一張/a

ul??

li?style="background:?#CB2929"1111/li??

li?style="background:?#23C048"2222/li??

li?style="background:?#00ABEA"3333/li??

li?style="background:?#FF9800"4444/li?

li?style="background:?#F96B36"5555/li?

li?style="background:?#ADADAD"6666/li???

/ul??

a?href="javascript:;"下一張/a

/div??

script?src=""/script

script??

$(function?()?{??

//下一張

function?moveLeft(){

$(".gameTab?ul").animate({marginLeft:"-220px"},300,?function?()?{??

$(".gameTab?ul").children().first().appendTo($(".gameTab?ul"));??

$(".gameTab?ul").css('marginLeft','0px');??

});??

}

$('.next').click(moveLeft);

//前一張

$('.prev').click(function?()?{?

$(".gameTab?ul").children().last().prependTo($(".gameTab?ul"));//把ul的最后一個(gè)子元素添加到開頭第一個(gè)

$(".gameTab?ul").css('marginLeft','-220px');??//初始化把ul的marginleft左移220

$(".gameTab?ul").animate({marginLeft:"0px"},300);??

})??

//?自動(dòng)輪播

var?timer?=?setInterval(moveLeft,3000)

//hover時(shí)停掉定時(shí)器

$('.gameTab').mouseenter(function(){

clearTimeout(timer)

})

$('.gameTab').mouseleave(function(){

timer=setInterval(moveLeft,3000)

})

})

/script??

/body??

/html

jquery多圖橫向間歇的滾動(dòng)

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"

""

html?xmlns=""?xml:lang="en"

head

meta?http-equiv="content-type"?content="text/html;?charset=utf-8"?/

titleImage?Gallery/title

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

script

//?JavaScript?Document

$(document).ready(function(e)?{

/***不需要自動(dòng)滾動(dòng)，去掉即可***/

time?=?window.setInterval(function(){

$('.og_next').click();?

},5000);

/***不需要自動(dòng)滾動(dòng)，去掉即可***/

linum?=?$('.mainlist?li').length;//圖片數(shù)量

w?=?linum?*?250;//ul寬度

$('.piclist').css('width',?w?+?'px');//ul寬度

$('.swaplist').html($('.mainlist').html());//復(fù)制內(nèi)容

$('.og_next').click(function(){

if($('.swaplist,.mainlist').is(':animated')){

$('.swaplist,.mainlist').stop(true,true);

}

if($('.mainlist?li').length4){//多于4張圖片

ml?=?parseInt($('.mainlist').css('left'));//默認(rèn)圖片ul位置

sl?=?parseInt($('.swaplist').css('left'));//交換圖片ul位置

if(ml=0??mlw*-1){//默認(rèn)圖片顯示時(shí)

$('.swaplist').css({left:?'1000px'});//交換圖片放在顯示區(qū)域右側(cè)

$('.mainlist').animate({left:?ml?-?1000?+?'px'},'slow');//默認(rèn)圖片滾動(dòng)????

if(ml==(w-1000)*-1){//默認(rèn)圖片最后一屏?xí)r

$('.swaplist').animate({left:?'0px'},'slow');//交換圖片滾動(dòng)

}

}else{//交換圖片顯示時(shí)

$('.mainlist').css({left:?'1000px'})//默認(rèn)圖片放在顯示區(qū)域右

$('.swaplist').animate({left:?sl?-?1000?+?'px'},'slow');//交換圖片滾動(dòng)

if(sl==(w-1000)*-1){//交換圖片最后一屏?xí)r

$('.mainlist').animate({left:?'0px'},'slow');//默認(rèn)圖片滾動(dòng)

}

}

}

})

$('.og_prev').click(function(){

if($('.swaplist,.mainlist').is(':animated')){

$('.swaplist,.mainlist').stop(true,true);

}

if($('.mainlist?li').length4){

ml?=?parseInt($('.mainlist').css('left'));

sl?=?parseInt($('.swaplist').css('left'));

if(ml=0??mlw*-1){

$('.swaplist').css({left:?w?*?-1?+?'px'});

$('.mainlist').animate({left:?ml?+?1000?+?'px'},'slow');????

if(ml==0){

$('.swaplist').animate({left:?(w?-?1000)?*?-1?+?'px'},'slow');

}

}else{

$('.mainlist').css({left:?(w?-?1000)?*?-1?+?'px'});

$('.swaplist').animate({left:?sl?+?1000?+?'px'},'slow');

if(sl==0){

$('.mainlist').animate({left:?'0px'},'slow');

}

}

}

})????

});

$(document).ready(function(){

$('.og_prev,.og_next').hover(function(){

$(this).fadeTo('fast',1);

},function(){

$(this).fadeTo('fast',0.7);

})

})

/script

style

body,ul,li{?padding:0;?margin:0;}

ul,li{?list-style:none;}

img{?border:none;}

a{?color:#6cf;}

a:hover{?color:#84B263;}

.box{?width:980px;?margin:0?auto;?position:relative;?overflow:hidden;?_height:100%;}

.picbox{?width:980px;?height:115px;?overflow:hidden;?position:relative;}

.piclist{?height:115px;position:absolute;?left:0px;?top:0px}

.piclist?li{?background:#eee;?margin-right:20px;?padding:5px;?float:left;}

.swaplist{?position:absolute;?left:-3000px;?top:0px}

.og_prev,.og_next{?width:30px;?height:50px;?background:url(../images/icon.png)?no-repeat;?background:url(../images/icon_ie6.png)?no-repeat\9;?position:absolute;?top:33px;?z-index:99;?cursor:pointer;filter:alpha(opacity=70);?opacity:0.7;}

.og_prev{?background-position:0?-60px;?left:4px;}

.og_next{?background-position:0?0;?right:4px;}

/style

/head

body

div?class="box"

div?class="picbox"

ul?class="piclist?mainlist"

lia?href="#"?target="_blank"img?src="images/1.jpg"?width="220"?height="105"?//a/li

lia?href="#"?target="_blank"img?src="images/2.jpg"?width="220"?height="105"http://a/li

lia?href="#"?target="_blank"img?src="images/3.jpg"?width="220"?height="105"http://a/li

lia?href="#"?target="_blank"img?src="images/4.jpg"?width="220"?height="105"http://a/li

lia?href="#"?target="_blank"img?src="images/1.jpg"?width="220"?height="105"http://a/li

lia?href="#"?target="_blank"img?src="images/2.jpg"?width="220"?height="105"http://a/li

lia?href="#"?target="_blank"img?src="images/3.jpg"?width="220"?height="105"http://a/li

lia?href="#"?target="_blank"img?src="images/4.jpg"?width="220"?height="105"http://a/li

/ul

ul?class="piclist?swaplist"/ul

/div

div?class="og_prev"/div

div?class="og_next"/div

/div

/body

/html

jquery 圖片彈出層多圖切換需要一個(gè)頁(yè)面多張圖但是一張圖里面有獨(dú)自的圖片組。

點(diǎn)擊彈出層的切換下一張按鈕時(shí)，把彈窗的這張圖片的src改成頁(yè)面中下一張圖片的src,點(diǎn)上一張也是，換上一張圖片的src,這樣通過(guò)改src就可以實(shí)現(xiàn)，或者是用這個(gè)插件，

jquery ajax多圖上傳顯示怎么寫

首先我們?cè)陧?yè)面上放置個(gè)上傳按鈕，使用POST提交到ajax.php。#ul_pics 用來(lái)顯示上傳完畢后的圖片。

a class="btn" id="btn"上傳圖片/a 最大500KB，支持jpg，gif，png格式。

ul id="ul_pics" class="ul_pics clearfix"/ul

接著，加載jQuery.js和plupload.full.min.js插件。

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

script type="text/javascript" src="plupload/plupload.full.min.js"/script

當(dāng)點(diǎn)擊按鈕“上傳圖片”后，彈出選擇文件對(duì)話框，按 "ctrl" 選擇多圖片上傳。然后調(diào)用 uploader.start() 方法，開始上傳。上傳中間過(guò)程我們可以用 UploadProgress 方法來(lái)顯示文件進(jìn)度，最后通過(guò) FileUploaded 來(lái)顯示對(duì)應(yīng)的圖片。通過(guò)瀏覽器控制臺(tái)，會(huì)發(fā)現(xiàn)上傳一張圖片，會(huì)向后臺(tái)ajax.php請(qǐng)求一次。

var uploader = new plupload.Uploader({ //創(chuàng)建實(shí)例的構(gòu)造方法

runtimes: 'html5,flash,silverlight,html4',

//上傳插件初始化選用那種方式的優(yōu)先級(jí)順序

browse_button: 'btn',

// 上傳按鈕

url: "ajax.php",

//遠(yuǎn)程上傳地址

flash_swf_url: 'plupload/Moxie.swf',

//flash文件地址

silverlight_xap_url: 'plupload/Moxie.xap',

//silverlight文件地址

filters: {

max_file_size: '500kb',

//最大上傳文件大小（格式100b, 10kb, 10mb, 1gb）

mime_types: [ //允許文件上傳類型

{

title: "files",

extensions: "jpg,png,gif"

}]

},

multi_selection: true,

//true:ctrl多文件上傳, false 單文件上傳

init: {

FilesAdded: function(up, files) { //文件上傳前

if ($("#ul_pics").children("li").length 30) {

alert("您上傳的圖片太多了！");

uploader.destroy();

} else {

var li = '';

plupload.each(files,

function(file) { //遍歷文件

li += "li id='" + file['id'] + "'div class='progress'span class='bar'/spanspan class='percent'0%/span/div/li";

});

$("#ul_pics").append(li);

uploader.start();

}

},

UploadProgress: function(up, file) { //上傳中，顯示進(jìn)度條

$("#" + file.id).find('.bar').css({

"width": file.percent + "%"

}).find(".percent").text(file.percent + "%");

},

FileUploaded: function(up, file, info) { //文件上傳成功的時(shí)候觸發(fā)

var data = JSON.parse(info.response);

$("#" + file.id).html("div class='img'img src='" + data.pic + "'//divp" + data.name + "/p");

},

Error: function(up, err) { //上傳出錯(cuò)的時(shí)候觸發(fā)

alert(err.message);

}

}

});

uploader.init();