當前位置:首頁 » 文件管理 » jquery批量上傳圖片插件

jquery批量上傳圖片插件

發布時間: 2022-03-15 21:33:12

『壹』 我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~

WebUploader項目,符合你的要求。

//文件上傳過程中創建進度條實時顯示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');

//避免重復創建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}

$percent.css('width',percentage*100+'%');
});
//文件上傳成功,給item添加成功class,用樣式標記上傳成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});

//文件上傳失敗,顯示上傳出錯。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');

//避免重復創建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}

$error.text('上傳失敗');
});

//完成上傳完了,成功或者失敗,先刪除進度條。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});

更多細節,請查看js源碼

『貳』 jquery 上傳文件插件uploadify jsp版本

寫一個servlet,看這里
http://www.javaeye.com/topic/376101

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

多圖上傳沒問題,但是想上傳後可以刪除,可以修改名稱。這個只能你自己來實現。之前專門寫了一個上傳插件希望能幫到你

http://blog.csdn.net/sq111433/article/details/16872403

『肆』 jquery 除了上傳插件Uploadify以外有沒有別的上傳插件,這個插件是選擇文件就直接上傳了

Uploadify有個方法可以設置,下面這樣設置,就不會直接上傳了
uploadifySettings('auto', false)

你加個按鈕,執行js:
$('#uploadify').uploadifyUpload();//開始上傳

『伍』 jquery 插件批量上傳圖片 的那個oncomplete回調函數排版為什麼我後面的圖片會蓋掉前面的文本框

按照hmtl的標准來的話 圖片是會覆蓋任何html控制項的 唯一的辦法就是讓他們錯開 也就是把圖片移開一點 設置position:absolute left和top就可以對其進行定位

『陸』 求大神,給個MVC3.0以上ef 架構的 jquery的圖片批量上傳實例,可將實例上傳到知道上,再此拜謝各位

批量上傳一般用的都是用jquery+ajax來實現,基本沒人用C#語言去寫。
去下載一個jquery+ajax批量上傳插件,引入你的項目就可以了

『柒』 javaWEB項目中如何實現批量選擇文件並上傳呢有什麼好的插件,最好有相關代碼例子

jquery.uploadify批量上傳控制項
[html]
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>還有jquery.js,你懂得!
這里注意哦,css文件會引用到這個圖片哦,所以請你指定這個圖片的位置哦,不然就沒有顯示這個叉叉哦,這個叉叉是刪除按鈕的哦,沒有就是空白哦!


[javascript]
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//這個是我自己獲取的自定義參數
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默認是false
'auto':false,//自動上傳,就是控制項自動上傳,默認是true
'multi':true,
//'successTimeout':99999,//超時時間
'formData':{'pid':pid,'entityName':entityName},//我的參數列表
//'fileObjName':'uploadify',//伺服器的屬性名字

'uploader':'你的後台url地址;jsessionid=${pageContext.session.id}',//提交伺服器路徑,這里
說明下;jsessionid=${pageContext.session.id},這個是用於非IE內核的瀏覽器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路徑用處不大
'buttonText':'文件上傳',//按鈕
//'height':'32',//瀏覽按鈕的高度
//'width':'100',//瀏覽按鈕的寬度
'fileTypeDesc':'支持的格式:',//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允許上傳的文件後綴
'fileSizeLimit':'3MB',//上傳文件的大小限制
'queueSizeLimit':25,//上傳數量
'onSelectError':function(file,errorCode,errorMsg){//返回一個錯誤,選擇文件的時候觸發
switch(errorCode){
case-100:
alert("上傳的文件數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件!");
break;
case-110:
alert("文件["+file.name+"]大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
break;
case-120:
alert("文件["+file.name+"]大小異常!");
break;
case-130:
alert("文件["+file.name+"]類型不正確!");
break;
}
},
'onFallback':function(){//檢測FLASH失敗調用
alert("您未安裝FLASH控制項,無法上傳圖片!請安裝FLASH控制項後再試。");
},
'onUploadSuccess':function(file,data,response){//上傳到伺服器,伺服器返回相應信息到data里
if(data){
vardataObj=eval("("+data+")");//轉換為json對象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//這個是我自己獲取的自定義參數
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默認是false
'auto':false,//自動上傳,就是控制項自動上傳,默認是true
'multi':true,
//'successTimeout':99999,//超時時間
'formData':{'pid':pid,'entityName':entityName},//我的參數列表
//'fileObjName':'uploadify',//伺服器的屬性名字

'uploader':'你的後台url地址;jsessionid=${pageContext.session.id}',//提交伺服器路徑,這里
說明下;jsessionid=${pageContext.session.id},這個是用於非IE內核的瀏覽器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路徑用處不大
'buttonText':'文件上傳',//按鈕
//'height':'32',//瀏覽按鈕的高度
//'width':'100',//瀏覽按鈕的寬度
'fileTypeDesc':'支持的格式:',//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允許上傳的文件後綴
'fileSizeLimit':'3MB',//上傳文件的大小限制
'queueSizeLimit':25,//上傳數量
'onSelectError':function(file,errorCode,errorMsg){//返回一個錯誤,選擇文件的時候觸發
switch(errorCode){
case-100:
alert("上傳的文件數量已經超出系統限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"個文件!");
break;
case-110:
alert("文件["+file.name+"]大小超出系統限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
break;
case-120:
alert("文件["+file.name+"]大小異常!");
break;
case-130:
alert("文件["+file.name+"]類型不正確!");
break;
}
},
'onFallback':function(){//檢測FLASH失敗調用
alert("您未安裝FLASH控制項,無法上傳圖片!請安裝FLASH控制項後再試。");
},
'onUploadSuccess':function(file,data,response){//上傳到伺服器,伺服器返回相應信息到data里
if(data){
vardataObj=eval("("+data+")");//轉換為json對象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>

[javascript]
$(function(){
snedUpLoad();//jquery容器載入完運行我們的函數
})
$(function(){
snedUpLoad();//jquery容器載入完運行我們的函數
})


[html]
<inputtype="file"name="uploadify"id="uploadify"/>//申明控制項的容器
<inputtype="file"name="uploadify"id="uploadify"/>//申明控制項的容器
前台頁面代碼基本就這樣了,很好明白,至於後台邏輯和普通上傳處理一致的,這里就不列出來的,最後上一張圖給大家鑒賞一下
(tip:其實他的批量上傳並不是一次全部提交處理的,他是一個一個依次提交,相當是一個for循環,所以後台處理的同時只是一個文件上傳,即排序的處理上傳文件,就和單個文件上傳的代碼一樣,如果你早有後台的單文件上傳代碼就不用改,直接調用就行了,可以共用)

『捌』 Jquery uploadify圖片上傳插件無法上傳的解決方法

首先你確定你使用的插件的版本,版本不同,產生的問題也不同,我用的是3.2.1的版本,我前幾天已經做好的功能今天運行的時候出錯了,搞了半天也不知道那錯了,最好仔細尋找,原來是jquery庫的引入問題,可能是我引入的包版本低了,我換了一個js庫立馬好了,真是坑爹啊,誰需要這個demo的可以郵件我!

『玖』 如何通過jQuery的上傳插件ajaxFileUpload上傳文件給webservice

var
elementIds=["flag"];
//flag為id、name屬性名
$.ajaxFileUpload({
url:
'uploadAjax.htm',
type:
'post',
secureuri:
false,
//一般設置為false
fileElementId:
'file',
//
上傳文件的id、name屬性名
dataType:
'text',
//返回值類型,一般設置為json、application/json
elementIds:
elementIds,
//傳遞參數到伺服器
success:
function(data,
status){
alert(data);
},
error:
function(data,
status,
e){
alert(e);
}
});

『拾』 jquery批量上傳圖片插件uploadify 的例子 可以用的

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<metahttp-equiv='Content-Type'content='text/html;charset=utf-8'/>

<title>Fileupload</title>
<linkrel="Stylesheet"href="js/Plug-in/jquery.uploadify/uploadify.css"/>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/swfobject.js"></script>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<scripttype="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>
<inputtype="file"name="uploadify"id="uploadify"/>
<ahref="javascript:$('#uploadify').uploadifyUpload()">Upload</a>|<ahref="javascript:$('#uploadify').uploadifyClearQueue()">cancel</a>
<divid="fileQueue"></div>
</body>
</html>

後台uploadify.php

<?php
/*
Uploadifyv2.1.0
ReleaseDate:August24,2009

Copyright(c)2009RonnieGarcia,TravisNickels

Permissionisherebygranted,freeofcharge,toanypersonobtaininga
(the"Software"),todeal
,
touse,,modify,merge,publish,distribute,sublicense,and/orsell
copiesoftheSoftware,
furnishedtodoso,:


.

THESOFTWAREISPROVIDED"ASIS",WITHOUTWARRANTYOFANYKIND,EXPRESSOR
IMPLIED,,
.INNOEVENTSHALLTHE
,DAMAGESOROTHER
LIABILITY,WHETHERINANACTIONOFCONTRACT,TORTOROTHERWISE,ARISINGFROM,

THESOFTWARE.
*/
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";
}
?>
熱點內容
超簡單解壓 發布:2024-10-31 05:33:15 瀏覽:458
安卓手機分配律在哪裡看 發布:2024-10-31 05:26:03 瀏覽:44
xor演算法 發布:2024-10-31 05:25:24 瀏覽:388
蘋果發給安卓手機照片什麼格式 發布:2024-10-31 05:25:19 瀏覽:610
泡澡球解壓 發布:2024-10-31 05:20:18 瀏覽:640
電腦雲伺服器系統 發布:2024-10-31 05:07:49 瀏覽:537
為什麼電腦貓鼠進不去伺服器 發布:2024-10-31 05:00:10 瀏覽:932
編程小老頭 發布:2024-10-31 04:56:05 瀏覽:319
形參的預設存儲類型是 發布:2024-10-31 04:55:33 瀏覽:767
fh2運行需要哪些配置 發布:2024-10-31 04:50:57 瀏覽:169