uploadify多圖片上傳實例

時間 2019-11-11

標籤 uploadify 圖片上傳實例简体版

原文原文鏈接

upload.phpjavascript

  <html>  
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      <title>uploadify 多文件上傳例子</title>  
      <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
      <script type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
      <script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
      <style type="text/css">  
      body {  
        font: 13px Arial, Helvetica, Sans-serif;  
      }  
      .haha{  
        color:#FFFFFF;  
      }  
      #queue {  
        background-color: #FFF;  
        border-radius: 3px;  
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);  
        height: 103px;  
        margin-bottom: 10px;  
        overflow: auto;  
        padding: 5px 10px;  
        width: 300px;  
      }  
      </style>  
    </head>  


    <body>  
      <h1>Uploadify Demo</h1>  
      <form>  
        <div id="queue"></div>  
        <input id="file_upload" name="file_upload" type="file" multiple="true">  
      </form>  

      <script type="text/javascript">  
      $(function() {  
        $('#file_upload').uploadify({  
                    'debug'         : false,  
                    'auto'          : false,             //是否自動上傳,  
                    'buttonClass'   : 'haha',           //按鈕輔助class  
                    'buttonText'    : '上傳圖片',       //按鈕文字  
                    'height'        : 30,               //按鈕高度  
                    'width'         : 100,              //按鈕寬度  
                    
                    'fileObjName'   : 'filedata',           //默認 Filedata, $_FILES控件名稱  
                    'fileSizeLimit' : '1024KB',          //文件大小限制 0爲無限制 默認KB  
                    'fileTypeDesc'  : 'All Files',       //圖片選擇描述  
                    'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件後綴限制 默認：'*.*'  
                    'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//傳輸數據JSON格式  
                    //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated  
                    //'progressData' : 'speed',             //默認percentage 進度顯示方式  
                    'queueID'       : 'queue',              //默認隊列ID  
                    'queueSizeLimit': 20,                   //一個隊列上傳文件數限制  
                    'removeCompleted' : true,               //完成時是否清除隊列 默認true  
                    'removeTimeout'   : 3,                  //完成時清除隊列顯示秒數,默認3秒  
                    'requeueErrors'   : false,              //隊列上傳出錯，是否繼續回滾隊列  
                    'successTimeout'  : 5,                  //上傳超時  
                    'uploadLimit'     : 99,                 //容許上傳的最多張數  
                    'swf'  : 'uploadify/uploadify.swf', //swfUpload  
                    'uploader': 'handle.php', //服務器端腳本  


                    //修改formData數據  
                    'onUploadStart' : function(file) {  
                        $("#file_upload").uploadify("settings", "someOtherKey", 2);  
                      },  
                    //刪除時觸發  
                    'onCancel' : function(file) {  
                        // alert('The file ' + file.name + '--' + file.size + ' was cancelled.');  
                      },  
                    //清除隊列  
                    'onClearQueue' : function(queueItemCount) {  
                        // alert(queueItemCount + ' file(s) were removed from the queue');  
                      },  
                    //調用destroy是觸發  
                    'onDestroy' : function() {  
                      alert('我被銷燬了');  
                    },  
                    //每次初始化一個隊列是觸發  
                    'onInit' : function(instance){  
                        // alert('The queue ID is ' + instance.settings.queueID);  
                      },  
                    //上傳成功  
                    'onUploadSuccess' : function(file, data, response) {  
                        alert(file.name + ' | ' + response + ':' + data);
                        $('#error').html(data)
                      },  
                    //上傳錯誤  
                    'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
                        alert('The file ' + file.name + ' could not be uploaded: ' + errorString);  
                      },  
                    //上傳彙總  
                    'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  
                      $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');  
                    },  
                    //上傳完成  
                    'onUploadComplete' : function(file) {  
                        // alert('The file ' + file.name + ' finished processing.');  
                      },  

                    });  
  });  


            //變換按鈕  
            function changeBtnText() {  
              $('#file_upload').uploadify('settings','buttonText','繼續上傳');  
            }  


            //返回按鈕  
            function returnBtnText() {  
              alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));  
            }  
            </script>  
            <h4>操做:</h4>   
            <a href="javascript:$('#file_upload').uploadify('upload', '*');">開始上傳</a>  |   
            <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除隊列</a>  |   
            <a href="javascript:$('#file_upload').uploadify('destroy');">銷燬上傳</a>  |   
            <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上傳</a>  |   
            <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上傳</a>  |   
            <a href="javascript:$('#file_upload').uploadify('stop');">中止上傳</a>  |   
            <a href="javascript:changeBtnText();">變換按鈕</a>  |   
            <h4>大小:</h4>  
            <div id='progress'></div>  
            <h4>錯誤提示:</h4> 
            <div id='error'></div>  
          </body>  
 </html>

handle.phpphp

<?php
if(@$_FILES["filedata"]){
    $path="upload/" . $_FILES["filedata"]["name"];
//把上傳的文件移動到指定目錄
    move_uploaded_file($_FILES["filedata"]["tmp_name"],$path);
}
?>

效果：css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。