uploadify上傳預覽
發布時間: 2023-07-25 21:39:37
Ⅰ 我需要一個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上傳文件
Uploadify是JQuery的一個上傳插件，實現的效果非常不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用，您也可以點擊下面的鏈接進行演示或下載。
首先按下面的步驟來實現一個簡單的上傳功能。
1 創建Web項目，命名為JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中。
2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。
3 在項目中添加UploadFile文件夾，用來存放上傳的文件。
進行完上面三步後項目的基本結構如下圖:
Ⅲ uploadify 3.2.1中點擊開始上傳沒有反應
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<title>jquery.uploadify上傳插件的使用</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>
<inputtype="file"name="uploadify"id="uploadify"/>
<ahref="javascript:$('#uploadify').uploadifyUpload()">上傳</a>|<ahref="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</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);
//$fileTypes=str_replace('*.','',$_REQUEST['fileext']);
//$fileTypes=str_replace(';','|',$fileTypes);
//$typesArray=split('|',$fileTypes);
//$fileParts=pathinfo($_FILES['Filedata']['name']);
//if(in_array($fileParts['extension'],$typesArray)){
//'texist
//mkdir(str_replace('//','/',$targetPath),0755,true);
move_uploaded_file($tempFile,$targetFile);
echo"1";
//}else{
// echo'Invalidfiletype.';
//}
}
?>
Ⅳ jsp頁面實現圖片預覽，截取和上傳
比較常用，而且簡單易用的jquery-uploadify插件，支持帶進度的多線程上傳
用到的是flash的跨域上傳模型，這里不用深究
基本文件大致包括
jquery-x.x.x.js
jquery.uploadify.x.js
uploadify.swf
uploadify.css
使用方式：
$(function(){
$("#fileId").uploadify({
width:42,
height:32,
swf:'js/uploadify.swf',
uploader:'upload.do;jsessionid=<%=session.getId()%>',
buttonImage:'image/movetophone_white.png',
fileSizeLimit:2048,
fileObjName:"imgFile",
method:'post',
removeCompleted:true,
fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
onSelectError:function(file,errorCode,errorMsg){
alert("文件過大");
},
onUploadStart:function(file){
},
onUploadSuccess:function(file,data,response){
alert("上傳完成");
},
onUploadError:function(file,errorCode,errorMsg){
alert(errorMsg);
}
});
});
<inputtype="file"id="fileId"/>另，工程中需要引入commons-fileupload的包。
Ⅳ 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循環,所以後台處理的同時只是一個文件上傳,即排序的處理上傳文件,就和單個文件上傳的代碼一樣,如果你早有後台的單文件上傳代碼就不用改,直接調用就行了,可以共用)
Ⅵ django上傳圖片並且帶有預覽功能
就用uploadfy唄，JS中在返回成功之後你自己在HTML中寫個img標簽，把返回的URL丟到IMG里不就完了，我們也用這個插件，還不錯
熱點內容