jquery上傳插件uploadify
Ⅰ 請問ASP要如何使用jquery的插件uploadify,官網上的只有php的
Uploadify簡單說來,是基於Jquery的一款文件上傳插件。它的功能特色總結如下:
支持單文件或多文件上傳,可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用,諸如PHP,.NET,java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展,可控制每一步驟的回調函數(onSelect, onCancel……)
通過介面參數和CSS控制外觀
更多……
相關鏈接
Uploadify主頁地址:http://www.uploadify.com/ 在該頁面你可以了解到關於他的更多內容。
Uploadify在線演示:在線Demo
Uploadify配置參數及介面文檔:http://www.uploadify.com/documentation
Uploadify插件下載地址:http://www.uploadify.com/download
使用方法
下載插件安裝包後,可以看到裡面的幾個主要文件:jquery.uploadify.js(完成上傳功能的腳本文件,在調用頁面引用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控制項的主體文件,flash控制項)、upload.php(伺服器端處理文件,官方僅提供了php版的)
引用了插件文件後,在頁面中做如下調用:
//聲明一個普通的html文件上傳控制項,並指定id
<input type="file" name="fileInput" id="fileInput" />
//將聲明的普通上傳控制項與Uploadify插件綁定
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
//以下參數均是可選
'uploader' : 'uploader.swf', //指定上傳控制項的主體文件,默認『uploader.swf』
'script' : 'upload.php', //指定伺服器端上傳處理文件,默認『upload.php』
'cancelImg' : 'cancel.png', //指定取消上傳的圖片,默認『cancel.png』
'auto' : true, //選定文件後是否自動上傳,默認false
'folder' : '/uploads' //要上傳到的伺服器路徑,默認『/』
'muti' : true, //是否允許同時上傳多文件,默認false
'fileDesc' : 'rar文件或zip文件' //出現在上傳對話框中的文件類型描述
'fileExt' : '*.rar;*.zip', //控制可上傳文件的擴展名,啟用本項時需同時聲明fileDesc
'sizeLimit': 86400 //控制上傳文件的大小,單位byte
'simUploadLimit' :5 //多文件上傳時,同時上傳文件數目限制
});
});
</script>
上面列出了我認為常用的配置選項,此外還有很多參數可配置,參考官方文檔
通過調用相關功能函數,聲明功能按鈕。
例如聲明上傳功能按鈕(自動上傳時不需要):
<a href="javascript:$('#fileInput').fileUploadStart();">上傳文件</a>
聲明取消多文件上傳時上傳隊列:
<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上傳隊列</a>
文章來自中國建站:http://www.jz123.cn/text/2419333.html
Ⅱ jquery.uploadify 能否實現分片上傳
簡單實現限制uploadify上傳個數
?
123456789101112131415161718
function deleteUrl(){ $("body").on("click",".img-wrap .mask span",function(event){ event.stopPropagation(); var qs=$('#file_upload-queue>div');//所有的隊列 var id=qs.eq(2).attr('id');//得到第三個隊列的id $('#uploadTowedAccredit').uploadify('cancel',id);//這樣就行了,會自動重置隊列數量和刪除dom對象,不能直接qs.eq(2).remove(),無效 /* if(!window.confirm("您確定刪除附件?")){ return; } var imgUrl=$(this).parents(".img-wrap").find("img").attr("src"); deleteImage(imgUrl); $(this).parents(".img-wrap").remove(); */ });};
?
12345678
<li class="blockli clearfix" style="padding-bottom: 5px;"> <span class="left-name"><em class="red-star">*</em>拖機授權委託書:</span> <div class="upload-wrap" style="width:100px;"> <input type="file" name="uploadTowedAccredit" id="uploadTowedAccredit" class="filetext"/> </div> <span id="uploadTowedAccreditLinkTip" class="warn-tips"><em></em>請上傳附件,最多上傳${towedAccreditPicMax} 張</span> <div id="towedAccreditDiv" class="up-img-list clearfix"></div></li>
?
// 上傳拖機授權委託書function uploadTowedAccreditInit(){ $("#uploadTowedAccredit").uploadify({ 'hideButton':'true', 'preventCaching' : 'true', 'checkExisting':'true', 'swf': SWF, 'uploader':uploadImg, 'debug':false, 'multi': true, 'method': 'post', 'preventCaching' : true, 'removeCompleted' : true, 'removeTimeout' : 10, 'requeueErrors' : true, 'successTimeout' : 30, 'uploadLimit' : ${towedAccreditPicMax}, 'fileObjName' : 'Filedata', //單張圖片最大限制 'fileSizeLimit' : '1024KB', 'fileTypeDesc' : 'Image Files', //僅限上傳jpg格式圖片 'fileTypeExts' : '*.jpg;*.png', 'height': 24, 'width':73, 'buttonText' : '上傳附件', 'auto': true, 'buttonClass':'uploada btn-fff-24', 'onSWFReady' : function() { },
Ⅲ jquery uploadify上傳如何設置文件大小不超過2M
版本 uploadfy3
fileSizeLimit : 2048,
具體:
jsp頁面:
jQuery("#uploadify").uploadify({
。。。。
buttonText : 'SELECT', // The text to use for the browse button
checkExisting : false, // The path to a server-side script that checks for existing files on the server
debug : false, // Turn on swfUpload debugging mode
fileObjName : 'Filedata', // The name of the file object to use in your server-side script
fileSizeLimit : 2048, // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
fileTypeDesc : fileTypeDesc,
版本:jquery.uploadify.v2.1.0.min
'sizeLimit' : 2048*1024,
jQuery("#uploadify").uploadify({
。。。。。
'auto' : false,
'multi' : true,
'queueSizeLimit' : queueSizeLimit,
'buttonText' : 'BROWSE',
'sizeLimit' : 2048*1024,
Ⅳ jquery上傳控制項uploadify有沒有辦法控制多文件上傳時的上傳順序
猛的一下沒看太懂你的意思, jquery uploadify可以限制文件上傳的個數,文件的大小,但對寬高沒有限制,你需要自己去設置判斷;如果是圖片的話
Ⅳ jquery Uploadify上傳文件
Uploadify是JQuery的一個上傳插件,實現的效果非常不錯,帶進度顯示。不過官方提供的實例時php版本的,本文將詳細介紹Uploadify在Aspnet中的使用,您也可以點擊下面的鏈接進行演示或下載。
首先按下面的步驟來實現一個簡單的上傳功能。
1 創建Web項目,命名為JQueryUploadDemo,從官網上下載最新的版本解壓後添加到項目中。
2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。
3 在項目中添加UploadFile文件夾,用來存放上傳的文件。
進行完上面三步後項目的基本結構如下圖:
Ⅵ 有哪些好用的 jQuery 圖片上傳插件
1、uploadify
它是針對jQuery的免費文件上傳插件,可以輕松將單個或多個文件上傳到網站上,可控制並發上傳的文件數,通過介面參數和CSS控制外觀。Web伺服器需支持flash和後端開發語言。
2、FancyUpload
它是一個由CSS和XHTML編寫樣式的Ajax文件上傳工具,安裝簡便,伺服器獨立,由MooTools模塊驅動,可以在任何現代瀏覽器上使用。
3、Aurigma Upload Suite(Image Uploader)
這是一個不限大小,不限格式的文件/圖片批量上傳工具,是收費控制項。它支持雲端存儲和客戶端文件處理,支持斷點續傳,穩定可靠。從8.0.8開始,Image Uploader將名稱改為"Aurigma Upload Suite"。