程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP綜合 >> php+jQuery.uploadify實現文件上傳教程

php+jQuery.uploadify實現文件上傳教程

編輯:PHP綜合

這兩天用上傳的控件,PHP+Jquery今天先介紹這個uploadify,嗯,我今天下載因為我英文不是很好所以我就在網上找的使用教程,我發現好多用不了,我那個去,你看官方文檔才知道很多API已經不是以前的API了。今天總結一下給大家,給大家一個提醒最多還是要看官方的http://www.uploadify.com/documentation/!

簡單舉例一下使用然後我都加上注釋給大家,方便大家閱讀和使用下載官方的之後直接使用就OK了,當然你需要什麼在直接修改就可以了!

復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFy講解</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
 font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>
<body>
 <h1>Uploadify講解由widuu提供</h1>
 <form>
  <div id="queue"></div>
  <input id="file_upload" name="file_upload" type="file" multiple="true">
 </form>
 <script type="text/javascript">
  <?php $timestamp = time();?>
  $(function() {
   $('#file_upload').uploadify({
    
    //上傳文件時post的的數據
    'formData'     : {
     'timestamp' : '<?php echo $timestamp;?>',
     'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
     'id'  : 1
    },
    'swf'      : '/uploadify/uploadify.swf',
    'uploader' : 'http://localhost/uploadify/uploadify.php',
    'onInit'   : function(index){
     alert('隊列ID:'+index.settings.queueID);
    },
    'method'   : 'post', //設置上傳的方法get 和 post
    //'auto'    : false, //是否自動上傳 false關閉自動上傳 true 選中文件後自動上傳
    //'buttonClass' : 'myclass', //自定義按鈕的樣式
    //'buttonImage' : '按鈕圖片',
    'buttonText'  : '選擇文件', //按鈕顯示的字跡
    //'fileObjName' : 'mytest'  //後台接收的時候就是$_FILES['mytest']
    'checkExisting' : '/uploadify/check-exists.php', //檢查文件是否已經存在 返回0或者1
    'fileSizeLimit' : '100KB', //上傳文件大小的限制
    'fileTypeDesc'  : '你需要一些文件',//可選擇的文件的描述
    'fileTypeExts'  : '*.gif; *.jpg; *.png', //文件的允許上傳的類型
    
    //上傳的時候發生的事件
    'onUploadStart' : function(file){
      alert('開始上傳了');       },
    'uploadLimit'   : 5, //設置最大上傳文件的數量
    /*
    'onUploadComplete' : function(result){
        for (var i in result.post){
         alert(i+':::'+result[i]);
        }
       },
    */
    //文件上傳成功的時候
    'onUploadSuccess' : function(file, data, response) {
     alert(data);
     },
     //
       'onUploadError' : function(file, errorCode, errorMsg, errorString) {
     alert(file.name + '上傳失敗原因:' + errorString);
     },
     'itemTemplate' : '追加到每個上傳節點的html',
     'height'  : 30, //設置高度 button
     'width'  : 30, //設置寬度
     'onDisable' : function(){
      alert('您禁止上傳');
     },
     'onEnable'  : function(){
      alert('您可以繼續上傳了');
     },
     //當文件選中的時候
     'onSelect'  : function(file){
      alert(file.name+"已經添加到隊列");
     }
   });
  });
  
 //一些常用的事件
 //$('#file_upload').uploadify('upload','*');    //用javascript 上傳的方法
 //$('#file_upload').uploadify('stop','*');      //用javascript 停止上傳的方法
 //$('#file_upload').uploadify('disable','*');   //用javascript 禁止上傳的方法
 //$('#file_upload').uploadify('settings','buttonText',"設置上傳按鈕");   //設置一些屬性
 //更多的請到官方網站www.uploadify.com/documentation/看講解謝謝
 </script>
<?php
/*
 *檢查文件是否存在的check-exists.php
 */
/*
$targetFolder = '/uploads';
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {
 echo 1;
} else {
 echo 0;
}
*/
?>
</body>
</html>

代碼注釋裡都做了詳細解釋了,我這裡就不多廢話了,如果還是有疑問,那就聯系我吧。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved