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

1.webuploader

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

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

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

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

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

<input>

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

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

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

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

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

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

1. ファイルをアップロードするときは、ページが更新されるようにページ全体を送信する必要があります。

2. アップロード時に画像をプレビューする方法はありません。そのため、間違った画像がアップロードされるまで待たなければならない場合があります。実際に画像がアップロードされた後、ページを更新するまでわかりません。

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

1. フロントエンド HTML ページで webuploader を構成します

2. バックグラウンド サーバーの PHP ページで画像を受け入れますwebuploader でアップロードして処理します。

3. バックグラウンドで画像を処理した後、返された json データがフロント デスクに送信されます。 json データを作成し、フィードバックを提供します。

4. ここでお話しさせていただくと、バックグラウンドでの 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 パッケージを紹介します

1. HTML タグの作成

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

3. index.html

   nbsp;html>
   
   
       <meta>
       <meta>
       <title>WebUploader演示</title>
       <link>
       <link>
       <link>
   
   
   
       <div>选择文件</div>
       <button>上传</button>
       <div></div>
       <div></div>
       
   <!--jquery 1.12-->
   <script></script>
   <!--bootstrap核心js文件-->
   <script></script>
   <!--webuploader js-->
   <!--<script type="text/javascript" src="static/jquery.js"></script>-->
   <script></script>
   <script></script>
   
   

   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  src="/static/imghwm/default1.png" data-src="' + ret + '" class="lazy" alt="php+WebUploader 画像一括アップロード" >';
                $('.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ファイルのファイル名は、ウェブアップローダー設定時と同じである必要があります。

アップロードしたフォルダーのアクセス許可を忘れずに設定してください。Linux では chmod を使用してフォルダーのアクセス許可を変更できます。変更しない場合、アップロードは失敗します。
私の対処方法は比較的簡単ですが、ご不明な点がございましたら、メッセージを残してください。

2. 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格式返回
   ?>

以上がwebuploaderの全内容ですが、webuploaderのパラメータ設定やイベントについてはwebuploaderの公式サイトを参照してください。皆さんもぜひメッセージを残して、コメントや修正を交換していただければ幸いです。

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

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