2012CSDN博客之星评选正式上线    【免费】解读海外市场营销奥秘    CSDN博客频道推出TAG功能

uploadify 多文件上传例子

分类： javascript 2012-08-21 18:19 526人阅读 评论(0) 收藏 举报
[html] view plaincopyprint?
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5. <title>uploadify 多文件上传例子</title>  
    6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
    7. <script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>  
    8. <link rel="stylesheet" type="text/css" href="uploadify.css">  
    9. <style type="text/css">  
    10. body {  
    11.     font: 13px Arial, Helvetica, Sans-serif;  
    12. }  
    13. .haha{  
    14.     color:#FFFFFF;  
    15. }  
    16. #queue {  
    17.     background-color: #FFF;  
    18.     border-radius: 3px;  
    19.     box-shadow: 0 1px 3px rgba(0,0,0,0.25);  
    20.     height: 103px;  
    21.     margin-bottom: 10px;  
    22.     overflow: auto;  
    23.     padding: 5px 10px;  
    24.     width: 300px;  
    25. }  
    26. </style>  
    27. </head>  
    28.   
    29.   
    30. <body>  
    31.     <h1>Uploadify Demo</h1>  
    32.     <form>  
    33.         <div id="queue"></div>  
    34.         <input id="file_upload" name="file_upload" type="file" multiple="true">  
    35.     </form>  
    36.       
    37.     <script type="text/javascript">  
    38.         $(function() {  
    39.             $('#file_upload').uploadify({  
    40.                 'debug'         : false,  
    41.                 'auto'          : true,             //是否自动上传,  
    42.                 'buttonClass'   : 'haha',           //按钮辅助class  
    43.                 'buttonText'    : '上传图片',       //按钮文字  
    44.                 'height'        : 30,               //按钮高度  
    45.                 'width'         : 100,              //按钮宽度  
    46.                 'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false  
    47.                 'fileObjName'   : 'files',           //默认 Filedata, $_FILES控件名称  
    48.                 'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB  
    49.                 'fileTypeDesc'  : 'All Files',       //图片选择描述  
    50.                 'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认：'*.*'  
    51.                 'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式  
    52.                 //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated  
    53.                 //'progressData' : 'speed',             //默认percentage 进度显示方式  
    54.                 'queueID'       : 'queue',              //默认队列ID  
    55.                 'queueSizeLimit': 20,                   //一个队列上传文件数限制  
    56.                 'removeCompleted' : true,               //完成时是否清除队列 默认true  
    57.                 'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒  
    58.                 'requeueErrors'   : false,              //队列上传出错，是否继续回滚队列  
    59.                 'successTimeout'  : 5,                  //上传超时  
    60.                 'uploadLimit'     : 99,                 //允许上传的最多张数  
    61.                 'swf'  : 'uploadify.swf', //swfUpload  
    62.                 'uploader': 'uploadify.php', //服务器端脚本  
    63.   
    64.   
    65.                 //修改formData数据  
    66.                 'onUploadStart' : function(file) {  
    67.                     //$("#file_upload").uploadify("settings", "someOtherKey", 2);  
    68.                 },  
    69.                 //删除时触发  
    70.                 'onCancel' : function(file) {  
    71.                     //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');  
    72.                 },  
    73.                 //清除队列  
    74.                 'onClearQueue' : function(queueItemCount) {  
    75.                     //alert(queueItemCount + ' file(s) were removed from the queue');  
    76.                 },  
    77.                 //调用destroy是触发  
    78.                 'onDestroy' : function() {  
    79.                     alert('我被销毁了');  
    80.                 },  
    81.                 //每次初始化一个队列是触发  
    82.                 'onInit' : function(instance){  
    83.                     //alert('The queue ID is ' + instance.settings.queueID);  
    84.                 },  
    85.                 //上传成功  
    86.                 'onUploadSuccess' : function(file, data, response) {  
    87.                     //alert(file.name + ' | ' + response + ':' + data);  
    88.                 },  
    89.                 //上传错误  
    90.                 'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
    91.                     //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);  
    92.                 },  
    93.                 //上传汇总  
    94.                 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  
    95.                     $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');  
    96.                 },  
    97.                 //上传完成  
    98.                 'onUploadComplete' : function(file) {  
    99.                     //alert('The file ' + file.name + ' finished processing.');  
    100.                 },  
    101.                
    102.             });  
    103.         });  
    104.   
    105.   
    106.         //变换按钮  
    107.         function changeBtnText() {  
    108.             $('#file_upload').uploadify('settings','buttonText','继续上传');  
    109.         }  
    110.   
    111.   
    112.         //返回按钮  
    113.         function returnBtnText() {  
    114.             alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));  
    115.         }  
    116.     </script>  
    117.     <h4>操作:</h4>   
    118.     <a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>  |   
    119.     <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>  |   
    120.     <a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a>  |   
    121.     <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>  |   
    122.     <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>  |   
    123.     <a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a>  |   
    124.     <a href="javascript:changeBtnText();">变换按钮</a>  |   
    125.     <h4>大小:</h4>  
    126.     <div id='progress'></div>   
    127. </body>  
    128. </html>