php+WebUploader 画像一括アップロード-PHPチュートリアル-php.cn

php+WebUploader 画像一括アップロード

1.webuploader

webuploader は主にファイルのアップロードに使用され、バッチアップロードと画像プレビューをサポートしています。画像から Base64 データを生成し、それを php+WebUploader 画像一括アップロードタグ内で直接使用するため、実際に画像をアップロードする前にその効果を確認できるという効果が得られます。より詳しい導入方法については、webuploader の公式 Web サイトを参照してください。私は、公式 Web サイトのドキュメントを読むことが最も直接的な学習方法であると常々信じています。 webuploader 公式ウェブサイトちなみに、webuploader は Baidu Fex Team チームによって保守されています。

2. Webuploader のアップロード原理

1. PHP HTML フォームファイルのアップロード

これについて説明する前に、PHP のファイルアップロード方法を理解する必要があります。

まず、html で <form> フォームを作成し、

<input type=&#39;file&#39; name=&#39;xxx&#39;>

ログイン後にコピー

というファイルアップロードタグを追加します。フォーム内の

アップロード送信ボタンをクリックすると、ファイルをサーバーにアップロードできます。

サーバー側では、受信したアップロードファイルをPHPで指定された一時フォルダーに保存します。PHPの組み込み関数move_uploaded_file()を使用します。このプロセスでは、ファイルの名前を変更したり、条件を満たしているかどうかを判断するためにファイルのサイズを変更したりすることができます。これでアップロードが完了します。

PHP フォームのアップロードの完全なケースについては、w3school によるこの記事を参照してください。そのため、ここでは詳細には説明しません。 PHP HTML フォームのアップロードファイル

#2. Webuploader のアップロード原理

PHP HTML フォームのアップロードを使用するとファイルのアップロード作業を完了できますが、欠点もあります。

ファイルをアップロードするときは、ページが更新されるようにページ全体を送信する必要があります。
アップロード時に画像をプレビューする方法はありません。そのため、間違った画像がアップロードされるまで待たなければならない場合があります。実際に画像がアップロードされた後、ページを更新するまでわかりません。

webuploader は、これら 2 つの問題を解決します。Webuploader は、フォームの送信に ajax テクノロジーを使用します。アップロード時にページを送信する必要はありません。イベントリスニングメカニズムを使用して、アップロード結果を監視できます。ページ上で決定を下したり、フィードバックを行ったり、画像のプレビューを行ったりすることもできます。 webuploader を使用して画像をアップロードするには、いくつかの手順のみが必要です。

フロントエンド HTML ページで webuploader を構成します
バックグラウンドサーバーの PHP ページで画像を受け入れますwebuploader でアップロードして処理します。
バックグラウンドで画像を処理した後、返された json データがフロントデスクに送信されます。 json データを作成し、フィードバックを提供します。
ここでお話しさせていただくと、バックグラウンドでの PHP による画像の受信と処理は、基本的に PHP HTML フォームのアップロードと同じです。
3. webuploaderの設定と使い方

すべての設定パラメータと使用方法については公式ドキュメントを参照できます。

webuploader 公式 Web サイト

、参考のために webuploader github ウェアハウスにいくつかのサンプルケースがあります。

example

私の実行環境: php5.6 nginx macOS 私のフォルダーのディレクトリ

index.php

upload_img.php
mywebupload.js
webuploader/
uploads/
1. フロントエンド HTML ページの設定 webupload
主に次の手順を実行します:

webuploader の関連する js および css パッケージを紹介します

HTML タグの作成
js ファイルを作成し、webuploader を初期化します。ページコード。webuploader フォルダーは github から完全に移動され、jquery を使用してページエクスペリエンスを強化しました。

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div id="imgPicker">选择文件</div>
    <button class="btn btn-primary btn-upload">上传</button>
    <div></div>
    <div></div>
    
<!--jquery 1.12-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--bootstrap核心js文件-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--webuploader js-->
<!--<script type="text/javascript" src="static/jquery.js"></script>-->
<script type="text/javascript" src="webuploader/dist/webuploader.min.js"></script>
<script type="text/javascript" src="mywebupload.js"></script>
</body>
</html>

ログイン後にコピー

mywebupload.js

$(function(){

    /*
     *   配置webuploader
     */

    var imgUploader = WebUploader.create({
        fileVal: 'img',  // 相当于input标签的name属性，用于后台PHP识别接收上传文件的field
        swf: './webuploader/dist/Uploader.swf',  // swf文件路径
        server: './upload_img.php',  // 文件接收服务端。
        fileNumLimit: 10,   // 上传文件的限制
        pick: {
            id : '#imgPicker',   // 
            multiple : true           // 是否支持多文件上传
        },
        //  只允许上传图片
        accept: {
            title: 'Only Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
        },
        auto: false,    // 添加文件后是否自动上传上去，我设置了false，后面我会利用自己的上传按钮上传
        resize: false   // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    });
    
    /*
     *   设置上传按钮的单击事件
     */
    $('.btn-upload').click(function(){
        imgUploader.upload();   // webuploader内置的upload函数，启动webuploader的上传    
    });
    
    /*
     *   配置webuploader的事件监听 
     */
    
    // 当图片文件被添加到上传队列中
    imgUploader.on('fileQueued', function (file) {
        addImgThumb(file);
    });
    
    // 生产图片预览
    function addImgThumb(file){
        imgUploader.makeThumb(file, function(error, ret){
            if(!error){
                img = '<img alt="" src="&#39; + ret + &#39;" />';
                $('.img-thumb').append(img);
            }else{
                console.log('making img error');
            }
        },1,1);
    }
    
    imgUploader.on('uploadSuccess'), function(file, response){
        // response 是后台upload_img.php返回的数据
        if(response.success){
            $('.result').append('<p>' + file.name + '上传成功</p>')
        }else{
            $('.result').append('<p>' + response.message + '</p>')
        }
    });
})

ログイン後にコピー

2. バックグラウンドの PHP ページは、アップロードされたファイルを処理します

2 つあります。ここでの注意点ポイント:

#バックグラウンドで処理されるphpファイルのファイル名は、ウェブアップローダー設定時と同じである必要があります。

upload_img.php

<?php
    $field = &#39;img&#39;;   // 对应webupload里设置的fileVal
    
    $savePath = &#39;./uploads/&#39;;       // 这里注意设置uploads文件夹的权限
    $saveName = time() . uniqid() . &#39;_&#39; . $_FILES[$field][&#39;name&#39;]; //  为文件重命名
    $fullName = $savePath . $saveName;  
    
    if (file_exists($fullName)) {
        $result = [
            &#39;success&#39;=>false, 
            'message'=>'相同文件名的文件已经存在'
        ];
    }else{
        move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
        $result = ['success'=>true, 'fullName'=>$fullName];
    }
    
    return json_encode($result);  // 将结果打包成json格式返回
?>

ログイン後にコピー

PHP 関連の技術記事の詳細については、PHP チュートリアル列にアクセスして学習してください。

以上がphp+WebUploader 画像一括アップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。