uploadify中文開發文檔，解決php多圖上傳

時間  2019-12-19
標籤 uploadify 中文 開發 文檔 解決 php 圖上 欄目 PHP 简体版
原文   原文鏈接

圖片上傳好用插件有，好比 uploadify  ueditor html5的各類ajax上傳插件，大部分都是異步，返回只是true之類，有些時候須要上傳圖片須要一塊兒上傳，其實能夠經過操做流程來避免這個問題，若是須要同步上傳，改造的東西比較多javascript

異步避免，好比有每一個用戶的圖片相冊，異步上傳，而後你本身選須要上傳圖片，好比首先第一步吧須要的信息先提交給主表，第二步在上傳多圖，使用上面提到的插件，由於有了主表的ID，php

還有本身比較大的改造，就是在同一頁面，異步上傳以後，返回圖片的名字和相對路徑input type hide一塊兒拋到action頁面,這種是比較好的，可是須要使用第三方插件改造的工做比較多，第一次以後就能夠在多個項目中使用css

ueditor 這個比較好用，若是須要使用請到筆者博客有專門介紹的博文html

uploadify  目錄結構html5

index.php 內容java

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="http://resource.ehmall.com.cn/js/jquery.js" type="text/javascript"></script>
<script src="jquery.uploadify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
</head>

<body>
<link href="uploadify.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.uploadify.js"></script>

<input id="file_upload" name="file_upload" type="file" multiple="true">  


 <a id="zx" href="javascript:">上傳</a>
    <script type="text/javascript">
        $(function() {
            $('#file_upload').uploadify({
                auto       : false,   //是都自動上傳
                buttonText : '選擇圖片',  //按鈕名稱
                'swf'      : 'uploadify.swf',  //使用到的swf
                'uploader' : 'uploadify.php'   //上傳到那個文件       
            });
        });
                
               
                 $("#zx").click(function(){
                    $('#file_upload').uploadify('upload','*');  
                });
                
    </script>
</body>
</html>
uploadify.php
$targetFolder = '/uploads'; // Relative to the root


if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
    
    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    
    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        return $targetFile;
    } else {
        echo 'Invalid file type.';
    }
}

 

Uploadify 3.2 參數屬性、事件、方法函數詳解jquery

 

1、屬性
屬性名稱    默認值    說明
auto    true    設置爲true當選擇文件後就直接上傳了，爲false須要點擊上傳按鈕才上傳 。
buttonClass    」    按鈕樣式
buttonCursor    ‘hand’    鼠標指針懸停在按鈕上的樣子
buttonImage    null    瀏覽按鈕的圖片的路徑 。
buttonText    ‘SELECT FILES’    瀏覽按鈕的文本。
checkExisting    false    文件上傳重複性檢查程序，檢查即將上傳的文件在服務器端是否已存在，存在返回1，不存在返回0
debug    false    若是設置爲true則表示啓用SWFUpload的調試模式
fileObjName    ‘Filedata’    文件上傳對象的名稱，若是命名爲’the_files’，PHP程序能夠用$_FILES['the_files']來處理上傳的文件對象。
fileSizeLimit    0    
上傳文件的大小限制 ，若是爲整數型則表示以KB爲單位的大小，若是是字符串，則可使用(B, KB, MB, or GB)爲單位，好比’2MB’；

若是設置爲0則表示無限制

fileTypeDesc    ‘All Files’    這個屬性值必須設置fileTypeExts屬性後纔有效，用來設置選擇文件對話框中的提示文本，如設置fileTypeDesc爲「請選擇rar doc pdf文件」
fileTypeExts    ‘*.*’    設置能夠選擇的文件的類型，格式如：’*.doc;*.pdf;*.rar’ 。
formData         JSON格式上傳每一個文件的同時提交到服務器的額外數據，可在’onUploadStart’事件中使用’settings’方法動態設置。
height    30    設置瀏覽按鈕的高度 ，默認值
itemTemplate    false    用於設置上傳隊列的HTML模版，可使用如下標籤：
instanceID – Uploadify實例的ID
fileID – 列隊中此文件的ID,或者理解爲此任務的ID
fileName – 文件的名稱
fileSize – 當前上傳文件的大小
插入模版標籤時使用格式如：${fileName}
method    Post    提交方式Post或Get
multi    true    設置爲true時能夠上傳多個文件。
overrideEvents         設置哪些事件能夠被重寫，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
preventCaching    true    若是爲true，則每次上傳文件時自動加上一串隨機字符串參數，防止URL緩存影響上傳結果
progressData    ‘percentage’    設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
queueID    false    設置上傳隊列容器DOM元素的ID，若是爲false則自動生成一個隊列容器。
queueSizeLimit    999    隊列最多顯示的任務數量，若是選擇的文件數量超出此限制，將會出發onSelectError事件。
注意此項並不是最大文件上傳數量，若是要限制最大上傳文件數量，應設置uploadLimit。
removeCompleted    true    是否自動將已完成任務從隊列中刪除，若是設置爲false則會一直保留此任務顯示。
removeTimeout    3    若是設置了任務完成後自動從隊列中移除，則能夠規定從完成到被移除的時間間隔。
requeueErrors    false    若是設置爲true，則單個任務上傳失敗後將返回錯誤，並從新加入任務隊列上傳。
successTimeout    30    文件上傳成功後服務端應返回成功標誌，此項設置返回結果的超時時間
swf    ‘uploadify.swf’    uploadify.swf 文件的相對路徑。
uploader    uploadify.php    後臺處理程序的相對路徑。
uploadLimit    999    最大上傳文件數量，若是達到或超出此限制將會觸發onUploadError事件。
width    120    設置文件瀏覽按鈕的寬度。
 

2、事件
事件名稱    說明
onCancel(file)    
當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發，file參數爲被取消上傳的文件對象

onClearQueue(queueItemCount)    當調用函數cancel方法時觸發，queueItemCount參數爲被取消上傳的文件數量。
onDestroy()    當destory方法被調用時觸發
onDialogClose(queueData)    
當文件瀏覽框關閉時觸發，若是將此事件被重寫，則當向隊列添加文件上傳出錯時不會彈出錯誤消息提示。

queueData對象包含以下屬性：

filesSelected 文件選擇對話框中共選擇了多少個文件
filesQueued 已經向隊列中添加了多少個文件
filesReplaced 已經向隊列中替換了多少個文件
filesCancelled 取消了多少個文件 filesErrored 出錯了多少個文件
onDialogOpen()    當文件選擇對話框彈出時當即出發，但可能在文件選擇對話框被關閉以前並不能所有執行。
onDisable()    當disable方法禁用Uploadify上傳按鈕時被調用時觸發。
onEnable()    當disable方法啓用Uploadify上傳按鈕時被調用時觸發。
onFallback()    當Uploadify初始化過程當中檢測到當前瀏覽器不支持flash時觸發。
onInit()    首次初始化Uploadify結束時觸發。
onQueueComplete(queueData)    
文件上傳隊列處理完畢後觸發。

queueData對象包含以下屬性：

uploadsSuccessful – 上傳成功的文件數量
uploadsErrored – 上傳失敗的文件數量
onSelect(file)    
選擇文件後向隊列中添加每一個上傳任務時都會觸發。

onSelectError(file, errorCode, errorMsg)    
選擇文件後向隊列中添加每一個上傳任務時若是失敗都會觸發。

file – 文件對象

errorCode – 錯誤代碼以下：

QUEUE_LIMIT_EXCEEDED – 任務數量超出隊列限制；
FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制；
ZERO_BYTE_FILE – 文件大小爲0
INVALID_FILETYPE – 文件類型不符合要求
errorMsg – 錯誤提示，可經過’this.queueData.errorMsg’定製

onSWFReady()    Flash文件載入成功後觸發。
onUploadComplete(file)    每一個文件上傳完畢後不管成功與否都會觸發。
onUploadError(file, errorCode, errorMsg, errorString)    文件上傳出錯時觸發，參數由服務端程序返回。
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)    
處理上傳隊列的過程當中會屢次觸發此事件，每當任務狀態有更新時都會觸發。

file – 文件對象
bytesUploaded – 已上傳的字節數
bytesTotal – 文件總字節數
totalBytesUploaded – 當前任務隊列中所有文件已上傳的總字節數
totalBytesTotal – 當前任務隊列中所有文件的總字節數
onUploadStart(file)    當文件即將開始上傳時當即觸發
onUploadSuccess(file, data, response)    
當文件上傳成功時觸發

file – 文件對象
data – 服務端輸出返回的信息
response – 有輸出時爲true,若是無響應爲false，若是返回的是false,當超過successTimeout設置的時間後假定爲true
3、方法
方法名稱    說明    應用舉例
cancel(fileID, suppressEvent)    
取消隊列中的任務，無論此任務是否已經開始上傳

fileID – 要取消的文件ID，若是爲空則取消隊列中第一個任務，若是爲’*'則取消全部任務
suppressEvent – 是否阻止觸發onUploadCancel事件，當清空隊列時很是實用。
<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’)">取消第一個</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’, ‘*’)">清空隊列</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">開始上傳全部任務</a>

destroy()    銷燬Uploadify實例並將文件上傳按鈕恢復到原始狀態    <a href="javascript:$(‘#file_upload’).uploadify(‘destroy’)">銷燬Uploadify實例</a>
disable(setDisabled)    
禁用或啓用文件瀏覽按鈕

setDisabled – 設置爲true表示禁用，false爲啓用

<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, true)">禁用按鈕</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, false)">啓用按鈕</a>

settings(name, value, resetObjects)    
獲取或設置Uploadify實例參數

name – 屬性名稱，若是隻提供屬性名稱則表示獲取其值
value – 屬性值
resetObjects – 設置爲true時，更新postData對象將清空現有的值。不然，新的值將被添加到其末尾。
$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’);

$(‘#file_upload’).uploadify(‘settings’,'buttonText’));

stop()    中止當前正在上傳的任務    
<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">開始上傳</a>

<a href="javascript:$(‘#file_upload’).uploadify(‘stop’)">中止上傳</a>

upload(fileID)    當即上傳指定的文件，若是fileID爲’*'表示上傳全部文件，要指定上傳多個文件，則將每一個文件的fileID做爲一個參數    <a href="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">開始上傳全部文

關於沒法在formData獲取到值得解決辦法：在動態設置setting裏設置就能夠了，仍是不知道是什麼緣由在直接配置文件裏獲取不到值。 另外若是將上傳文件信息保存在session裏要注意遍歷的時候會有一點BUG，直接循環寫入數據庫會多出一組，緣由暫時不明

 

接來下是html5的自帶的多任務文件上傳input控件ajax

在IE8以上的均可以支持，其餘瀏覽器都沒問題，只有ie8，ie8如下不支持html5，蛋疼你懂的數據庫

    <form action="save.php" method="post" enctype="multipart/form-data">
            
            <input type="file" name="fileToUpload[]" id="fileToUpload" multiple="multiple">
            <input type="submit" value="提交"/>
            
        </form>
  // 處理$_FILES['pic_set']的數據格式  
         foreach ($_FILES['pic_set'] as $key => $value) {
                   $i = 0;
                foreach ($value as $v) {
                     $de[$i][$key] = $v;  
                     $i++;
                }
            }
            
          foreach ($de as $va) {
                $tempFile = $va['tmp_name'];
                
                $tempath = '/data/upload/cms/pic_set/'.date("Ymd",time());
                $targetPath = $_SERVER['DOCUMENT_ROOT'].$tempath; 
                if(!is_dir($targetPath)){
                    mkdir($targetPath,'0777',true);
                 }
                $targetFilename = time().rand(1,10000);
                
                $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
                $fileParts = pathinfo($va['name']);
                
                $targetFile = $targetPath.'/'.$targetFilename.'.'.$fileParts['extension'];
                
                if (in_array($fileParts['extension'],$fileTypes)) {
                      move_uploaded_file($tempFile,$targetFile);
                }  
                $url[] = 'cms/pic_set/'.date("Ymd",time()).'/'.$targetFilename.'.'.$fileParts['extension'];
          }

      foreach ($url as $v1) {
          $data1['catalog_id'] =  $catalog_id;
          $data1['pic_set_url'] = $v1;
          Model()->table('catalog_pic_set')->insert($data1);
          
      }

值得注意的一點，就是name須要帶[]，並且post過來的數據須要整理瀏覽器

array
  'fileToUpload' => 
    array
      'name' => 
        array
          0 => string 'QQ Photo20150910172712.png' (length=26)
          1 => string 'Unnamed QQ Screenshot20151119145202.jpg' (length=39)
      'type' => 
        array
          0 => string 'image/png' (length=9)
          1 => string 'image/jpeg' (length=10)
      'tmp_name' => 
        array
          0 => string 'C:\wamp\tmp\php7BE.tmp' (length=22)
          1 => string 'C:\wamp\tmp\php7BF.tmp' (length=22)
      'error' => 
        array
          0 => int 0
          1 => int 0
      'size' => 
        array
          0 => int 21664
          1 => int 14293

是這個樣子的，可是須要整理成

array
  0 => 
    array
      'name' => string 'QQ Photo20150910172712.png' (length=26)
      'type' => string 'image/png' (length=9)
      'tmp_name' => string 'C:\wamp\tmp\php63E4.tmp' (length=23)
      'error' => int 0
      'size' => int 21664
  1 => 
    array
      'name' => string 'Unnamed QQ Screenshot20151119145202.jpg' (length=39)
      'type' => string 'image/jpeg' (length=10)
      'tmp_name' => string 'C:\wamp\tmp\php63E5.tmp' (length=23)
      'error' => int 0
      'size' => int 14293

才能持續上傳文件，可是這個是一個很差的方法，最好仍是異步上傳，這樣纔會吧php弄崩潰，特別是網絡慢的時候，返回圖片名稱和路徑，所有一塊兒post，或者分步

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程