jquery批量上傳圖片插件
『壹』 我需要一個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";
}
?>