php 3個多檔案上傳(uploadify、file upload、 webuploader)

快樂de饅頭發表於2017-01-17
PHPWeb

多檔案上傳的外掛常用的有：

1、jQuery uploadify  下載【http://www.uploadify.com/download/】

2、jquery file upload 下載【https://github.com/blueimp/jQuery-File-Upload/tags】

3、webuploader 下載【http://fex.baidu.com/webuploader/download.html】

注：

在使用的時候，要參照官網的文件說明，如果看不明白，可以百度一下想知道的，必境我這裡只是入門的小例項


一、jquery uploadify

該外掛已經把檔案寫好了（index.PHP和uploadify.php），下載後改下上傳路徑就行了，這裡沒什麼要講的


二、jquery file upload 以Thinkphp為例 Home模組下的Index控制器

佈局檔案index.html：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>檔案上傳</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css"/>
    <script src="__PUBLIC__/jquery.min.js"></script>

    <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css">
    <script src="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script>
    <script src="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script>
    <script src="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script>
</head>
<body>
    <div class="container">
        <div class="row fileupload-buttonbar" style="padding-left:15px;">
            <div class="thumbnail col-sm-6">
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                <div class="caption" align="center">
                    <span id="weixin_upload" class="btn btn-primary fileinput-button">
                    <span>上傳</span>
                    <input type="file" id="weixin_image" name="weixin_image[]" data-url="__CONTROLLER__/uploadImg" multiple>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            $("#weixin_image").fileupload({
                dataType: 'json',
                acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,  // 檔案上傳型別
                sequentialUploads: true,  // 連續上傳配置
                add: function (e, data) {
                    //提交到伺服器端
                    data.submit();
                }
            }).bind('fileuploadprogress', function (e, data) {  // 繫結上傳進度
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $("#weixin_progress").css('width',progress + '%');
                $("#weixin_progress").html(progress + '%');
            }).bind('fileuploaddone', function (e, data) {  // 上傳完成處理
                $("#weixin_upload").css({display:"none"});
                $('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="圖片" data-holder-rendered="true">');
            });
        });
    </script>
</body>
</html>

Index控制器下的uploadImg方法

/* 檔案上傳處理 */
public function uploadImg(){
    $upload = new \Think\Upload();// 例項化上傳類
    $upload->maxSize   =     3145728 ;// 設定附件上傳大小
    //$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳型別
    $upload->rootPath  =      './Public/Uploads/'; // 設定附件上傳根目錄
    $upload->savePath  =      ''; // 設定附件上傳（子）目錄
    $upload->autoSub = false;  // 關閉子目錄

    // 上傳檔案
    $info   =   $upload->upload();
    if(!$info) {// 上傳錯誤提示錯誤資訊
        $this->error($upload->getError());
    }else{// 上傳成功 獲取上傳檔案資訊
        $pathArr = array();
        foreach($info as $file){
            array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
        }
        echo json_encode($pathArr);
    }
}

三、webuploader (也是以Thinkphp為例) 可以多檔案多圖片大檔案上傳



HTML佈局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webuploader</title>
    <link rel="stylesheet" href="__PUBLIC__/webuploader/webuploader.css"/>
    <script src="__PUBLIC__/jquery.min.js"></script>
    <script src="__PUBLIC__/webuploader/webuploader.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 15px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 15px;
        }
        .uploader-list .file-item {
            position: relative;
        }
        .progress span {
            display: inline-block;
            height: 100%;
            background: #1C9F09;
        }
    </style>
</head>
<body>
<div id="uploader-demo">
    <!--用來存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">選擇圖片</div>
</div>
</body>
</html>

JS指令碼：

<script>
    // 圖片上傳demo
    jQuery(function() {
        var $ = jQuery,
        $list = $('#fileList'),
        // 優化retina, 在retina下這個值是2
        ratio = window.devicePixelRatio || 1,

        // 縮圖大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,

        // Web Uploader例項
        uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自動上傳。
            auto: true,

            // swf檔案路徑
            swf: '__PUBLIC__/webuploader/Uploader.swf',

            // 檔案接收服務端。
            server: '__CONTROLLER__/webuploader',

            // 選擇檔案的按鈕。可選。
            // 內部根據當前執行是建立，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允許選擇檔案，可選。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 當有檔案新增進來的時候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');

            $list.append( $li );

            // 建立縮圖
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能預覽</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 檔案上傳過程中建立進度條實時顯示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重複建立
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%');
        });

        // 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
        uploader.on( 'uploadSuccess', function( file ) {
            console.log(file);
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 檔案上傳失敗，現實上傳出錯。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

            // 避免重複建立
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上傳失敗');
        });

        // 完成上傳完了，成功或者失敗，先刪除進度條。
        uploader.on( 'uploadComplete', function( file ) {
//            $( '#'+file.id ).find('.progress').remove();
        });
    });
</script>

PHP程式碼：

public function webuploader() {
    $upload = new \Think\Upload();// 例項化上傳類
    $upload->maxSize   =     3145728 ;// 設定附件上傳大小
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳型別
    $upload->rootPath  =      './Public/Uploads/'; // 設定附件上傳根目錄
    $upload->savePath  =      ''; // 設定附件上傳（子）目錄
    $upload->autoSub = false;  // 關閉子目錄

    // 上傳檔案
    $info   =   $upload->upload();
    if(!$info) {// 上傳錯誤提示錯誤資訊
        $this->error($upload->getError());
    }else{// 上傳成功 獲取上傳檔案資訊
        $pathArr = array();
        foreach($info as $file){
            array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
        }
        echo json_encode($pathArr);
    }
}

個人感覺百度團隊開發的webuploader比較好用，具體在專案中使用，看需要了。

謝謝關注！


相關文章