検索
ホームページバックエンド開発PHPチュートリアルFine Uploader ファイルアップロードコンポーネントアプリケーションの紹介_PHP チュートリアル
Fine Uploader ファイルアップロードコンポーネントアプリケーションの紹介_PHP チュートリアルJul 21, 2016 pm 03:13 PM
アップロード導入バックステージ対処する成し遂げる応用データ書類時間ほとんどコンポーネント必要

最近では、バックグラウンドデータを処理する際にファイルのアップロードを実装する必要があるため、Fine Uploader を使用してファイルをアップロードする際に ajax を使用します (環境に応じて)。ブラウザのバージョン] IE のバージョンは 9 以降である必要があります [IE10]。このコンポーネントは、基本的に現在の主流のブラウザに依存しません。サードパーティのコンポーネントは、すでにサーバー側でサポートされており、ファイル サイズ、ファイル タイプの制限などをサポートしています。ファイルのアップロード数などは、公開されたオプションを備えた統一インターフェイスを通じて操作されます。

Github の Fine Uploader を参照 公式声明によると、Fine Uploader の前身は Ajax Upload です。新しいバージョンの Fine Uploader には主にいくつかの新機能が追加されています。バージョン 1.0 でリリースされた Realse Note から判断すると、この 2 つの最大の違いは、Fine Uploder が Jquery コンポーネントに基づいていないことです。同様の戻り値もすべて Json に統一されています。バックグラウンド サーバー操作とフロントエンド Dom オブジェクトの一部の操作コードはすべて Js Script スクリプト ファイルに集中されており、この統合により、CSS + JavaScript ファイルを追加するだけでファイルのアップロードを実現できます。ユーザーによるコンポーネントの参照と操作の難しさを大幅に簡素化します

Fine Uploader の機能は次のとおりです:
Fine Uploader の機能:
A: ファイルのアップロードの進行状況表示をサポートします
B: ファイルのドラッグ アンド ドロップによるブラウザ アップロード方法
C : 更新を行わない Ajax ページ。
F: クロスブラウザー。
E: Git Hub および Php Designer でパッケージ化ソース コードをダウンロードします。 8 のコードを確認すると、ソース コード構造が次のとおりであることがわかります。


ルート ディレクトリには、クライアント呼び出しに必要なファイルが表示されます。サーバー ディレクトリは、Perl/Php/Asp.net のさまざまな言語バージョンに対応しています。 [VB] など。implementation.test ディレクトリには、参考用の完全なローカル サンプル デモが含まれています。実際、公式が Basic-Demo-Page で簡単なデモを提供しています。 Bootstrap メソッドに基づいてここに構築します。 2013-01-04_162943まず、新しい空の Html ページを作成し、次のように CSS 参照を追加します。



コードは次のとおりです。

これら 2 つのファイルをダウンロードするときに参照する必要がある .fineuploader.css は、Fine Uploder のソース コードに対応する Client ディレクトリです。次の .fineuploder.css は、主にボタン スタイル、進行状況表示スタイル、次のように JavaScript ファイル参照を追加します: コードをコピーします
コードは次のとおりです:



;

Uploder.jsとuploader.basic.jsはすべてこのスクリプトに実装されているフロントエンドのアップロード機能です。
同時に処理と読み込みの進行状況の表示に必要な2つの動的画像を追加します。これらの画像は、fineuploder.css ファイルで呼び出されます。

次のコードを本文に追加します



コードをコピーします

コードは次のとおりです。



function createUploader() {
var Uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader'),
request: {
endpoint: 'server/handlerfunction'
},
text: {
uploadButton: ' 今すぐクリックして商品画像をアップロードしてください'
},
template:
'
' +
'
<span>{dragZoneText}</span>
' +
'
{uploadButtonText}
' +
'{dropProcessingText}'+
''+
'
    ' +
    '
    ',
    classes: {
    success: 'alertアラート成功'、
    失敗: 'アラート アラートエラー'
    }、
    デバッグ: true
    });
    }

    window.onload = createUploader;
    スクリプト>

    これは、Bootstrap に基づいており、Fine Uploader の最上級のフロントエンド用です。フロントエンド一般に必要なアイテム事 A: 追加 Css+Js 文例参照。B: 在 Js 中实例化 qq.FineUploder オブジェクト.运行効果如下:
    2013-01-04_170433
    查看JS構築qq.Fineuploader对象建过程.最初指定Fine Uploader插件のDom元素.通过Dom获取操作.request对应サービス务器端实现文件路径.在这建议不要自己構築サービス端末処理。むしろ直接採用官方提供の実装文書修正即可。template は、パッケージ上転送ファイルの追加コンテンツ モジュールの自己修正も可能です。debug は、ウェアラブルの制御台を使用するかどうかを制御するために使用される、Fine Uploader の通知情報であり、false と認められます。
    qq.FineUploader オブジェクトには次のような制御制御パラメータがあります:
    検証: このパラメータ一般的に使用される、実行上での文件操作前.在客端視一部验证.验证操作包含文件格式.文件大小.等追加格式如下:
    复制代符号代码如下:

    validation:
    {
    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
    sizeLimit: 204800 // 200 kB = 200 * 10 24バイト
    }
    allowedExtensions 制御上传文件の後缀格式数组。
    sizeLimit 転送ファイルサイズの上限、単位はバイトの数です。デバイスは必ずしもこの配置をサポートしているわけではありません。サーバーの端末に配置することもできます。
    minSizeLimit: 上転送ファイルサイズの下限、単位はバイトの数。同様に、いくつかのバイザーが存在します。
    外部针对qq.FineUploder对オブジェクト执行上で制御可能五个客端制御可能イベント再コールバックパラメータ下設定可能:
    callbacks:
    {
    onSubmit: function(id, fileName) {
    $messages.append('
    ');
    },
    onUpload: function(id, fileName) {
    $('#file-' + id).addClass('alert-info')
    .html('Fine Uploader ファイルアップロードコンポーネントアプリケーションの紹介_PHP チュートリアル ' +
    '初期化中 ' +
    '"' + ファイル名 + '"');
    }
    }

    onSubmit イベント: ファイルの送信が開始されます。呼び出しパラメーターの形式は次のとおりです: onSubmit:function(id, fileName){}。
    onUpload イベント: ファイルのアップロードが開始されます。 : function(id, fileName) {}。
    onProgress イベント: ファイルがアップロードされています。呼び出しパラメーターの形式は次のとおりです: onProgress:function(id,fileName,loaded,total){}。ファイルは次のとおりです。呼び出しパラメータの形式は次のとおりです: onComplete:function(id,fileName,responseJSON){ }。
    onCancel イベント: ファイルのアップロードをキャンセルします。呼び出しパラメータの形式は次のとおりです: onCancel:function(id,fileName){}
    上記の 5 つのイベントは、基本的にファイルのアップロード操作全体のすべてのプロセスをカバーします。これは完全にオープンであり、上記のイベントを呼び出すためのパラメーターの説明は次のとおりです:
    Id: ファイルを示します。 Fine Uploder の定義は、デフォルトで 0 からカウントされます。
    loaded: サーバーにアップロードされたデータのサイズ。 total: アップロードされるファイルのサイズ
    responseJSON: アップロード操作が完了した後に返される Json 形式のデータには、アップロードが成功したかどうかを判断するための IsSuccess 属性が含まれます。アップロード プロセス中にデータをサーバーに転送する場合は、次のパラメーターを使用して制御できます:
    params: データをサーバーに転送するために使用されます。パラメーターは、Post メソッドを使用して送信されることに注意してください。サーバー側に渡す一般的なパラメータの形式は次のとおりです:



    コードをコピーします
    コードは次のとおりです: params: {
    argument1: "value1",
    argument2: "value2"
    },


    OK。基本的に、Fine Uploader クライアントの初期化と制御操作のオプションは、IsAuto=false の場合、uploadStoreFiles() メソッドを通じて手動でトリガーできます。定義されている qq.FineUploader オブジェクト:


    コードをコピー
    コードは次のとおりです: $('#triggerUpload').click(function() { uploader2.uploadStoredFiles();
    } );


    この時点でアップロードをクリックすると、アップロード サーバーでまだ処理が行われていないことがわかります。


    コードをコピーします。
    コードは次のとおりです。 request: { endpoint: 'server/handlerfunction' },

    この時点で、ファイルのアップロードを処理するPhpファイルをEndPointで指定する必要があります[サーバー側については、まだない場合]。成熟した処理モジュールであるため、公式のサーバー ディレクトリを使用することをお勧めします。ここでは php 環境を使用し、対応するクライアントの変更は次のとおりです。



    コードをコピーします。次のように:


    request:
    { endpoint: 'controller/php.php' }
    php.php を開き、ファイルのヘッダーで XMLHttpRequest を処理する 3 つのクラスを定義していることを確認します。 FormPost、および BasicPost ファイルのサーバー側の処理はそれぞれ、ファイルの先頭のコメントで説明されています:
    /*****************************************
    このアップローダークラスの使用方法の例...
    次の行 (require を除く) のコメントを解除して、
    hese をデフォルトとして使用できます。

    // 有効な拡張子のリスト。例: array("jpeg", "xml", "bmp")
    $allowedExtensions = array();
    // バイト単位の最大ファイルサイズ
    $sizeLimit = 10 * 1024 * 1024;
    //JavaScript で設定された入力名
    $inputName = 'qqfile'

    require('valums-file-uploader/server/php.php');
    $uploader = 新しい qqFileUploader($allowedExtensions, $sizeLimit, $inputName);

    // PHP の getcwd() に相対的なフォルダー名を指定して handleUpload() を呼び出します
    $result = $uploader->handleUpload('uploads/');

    // iframe 経由でデータを渡すには、すべての HTML タグをエンコードする必要があります
    header("Content-Type: text/plain");
    echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

    /*****************************************/
    次のクラス呼び出しメソッドを簡単に追加するだけです。サーバー側の処理を完了します:



    コードをコピーします

    コードは次のとおりです:


    $allowedExtensions = array("jpeg", "jpg", "bmp", "png");
    $sizeLimit = 10 * 1024 * 1024 ; $uploader = new qqFileUploader($allowedExtensions, $sizeLimit); $result = $uploader->handleUpload('uploads/'); //アップロードされたファイルのフォルダー echo htmlspecialchars($result) )、ENT_NOQUOTES) ;
    allowExtensions は、ファイルのアップロードを許可する形式を定義します。
    sizeLimit の上限は、現在の PHP 環境設定を出力するために最初に使用されることに注意してください。 2M. より大きなファイルをアップロードする必要がある場合、php.ini ファイルの設定パラメータの変更についてはここでは説明しません。
    uploder は qq.Fileuploder オブジェクトを初期化し、設定をロードします。サーバー側のストレージ アップロード ファイルのストレージ パス。
    echo はサーバー側の出力のアップロード結果を必要とします。そうでない場合、クライアントはアップロード ステータスを判断するために指定されたレスポンスジェイソン パラメーターを受け入れることができません。サーバーはアップロードを処理し、handleUpload 関数定義を見つけます。



    コードをコピーします。 コードは次のとおりです。
    /*** アップロードされたファイルを処理します * @param string $uploadDirectory
    * @param string $replaceOldFile=true
    * @returns array('success'=>true) または array('error'=>'error message')
    */
    function handleUpload($uploadDirectory, $replaceOldFile = FALSE){
    if (!is_writable($uploadDirectory)){
    return array('error' => "サーバー エラー。アップロード ディレクトリは書き込み可能ではありません。");
    }

    if (!$this->file ){
    return array('error' => 'ファイルはアップロードされませんでした。');

    $size = $this ->file->getSize();

    if ($size == 0) ) {
    return array('error' =>'ファイルが空です');
    }

    if ($size > $ this->sizeLimit) {
    return array('error' => 'ファイルは空です')大きすぎます');
    }

    $pathinfo($this->file->getName());
    $ filename = $pathinfo['filename']
    //$filename = md5( ));
    $ext = @$pathinfo['extension'];// 拡張子が空の場合は通知を非表示にする

    if($this ->allowedExtensions && !in_array(strto lower($ext), $this->allowedExtensions )){
    $these = implode(', ', $this->allowedExtensions);
    return array('error' => ; 'ファイルの拡張子は無効です。'. $these . ' のいずれかである必要があります。 ');
    } $ext = ($ext == '') ? $ext : '.'

    if(!$replaceOldFile){
    ///アップロードされました
    while (file_exists($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)) {
    $filename .= rand(10, 99)
    }
    }

    $this->uploadName = $ext;

    if ($this->file->save($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)){
    return array('success'=>true)
    } else {
    return array(' error'=> 'アップロードされたファイルを保存できませんでした'
    }

    }


    したがって、受信パスは次のようにフォーマットする必要があります。
    $uploadDirectory = $_SERVER['DOCUMENT_ROOT ']."DS".$uploadDirectory; 個人的には、is_writeable ファイルの詳細が十分ではないと思います。 is_writeable は主にファイルまたはディレクトリが存在するかどうかを判断するため、is_writable の前にファイルが存在するかどうかを判断しやすくすることを個人的にお勧めします。サーバー側のファイルエラーの状況:



    コードをコピー

    コードは次のとおりです:


    if (!file_exists($uploadDirectory)) {
    return array(' error' => "サーバーエラー。アップロード ディレクトリが存在しません。");
    }

    ファイル保存操作の前に、処理関数がアップロードされたファイルの数、アップロードされたファイルのサイズ、ファイルのアップロードサイズが上限を超えているかどうか、アップロード処理中にそれぞれ 4 つの判断を行っていることがわかります。サーバー側で同じファイルをアップロードしたい場合、Fine Uploder の処理方法は書き換えではなく、ファイルに 10 から 99 までの乱数を付けて名前を付けてディレクトリに保存することがわかります。ファイルが正常に保存されると、サーバー側はアップロード操作が成功したかどうかを指定する IsSuccess を含む Json データを返します。IsSuccess パラメーターは、アップロード操作中にクライアントが操作を決定するための唯一のパラメーターとして使用されます。実際、この問題に対処するには、アップロード ファイルの設定が PHP 環境のデフォルトの 2M を超えていることが主な原因です。値を変更する必要があります。 php.ini ファイルの post_max_size と Upload_max_filesize を 10M を超えて変更し、Apache を再起動するか、Php 公式 Web サイトで設定手順を参照してください。 php.ini 設定ファイルを変更します。これで、Fine Uploader の設定プロセス全体が完了しました。クリックしてファイルを選択すると、次のような効果が表示されます:


    もちろん、詳細については、上記の Fine Uploader Analyze の公式デモを参照してください。ソースコードの観点から見た原理
    2013-01-04_191128
    http://www.bkjia.com/PHPjc/326398.html

    www.bkjia.com本当http://www.bkjia.com/PHPjc/326398.html技術記事最近では、バックグラウンドデータを処理する際にファイルアップロードを実装する必要があるため、Fine Uploader を使用して、Ajax を使用してファイルを直接アップロードすることができます...
    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    wpsystem是什么文件夹wpsystem是什么文件夹Sep 01, 2022 am 11:22 AM

    wpsystem文件夹是windows应用文件夹;创建WpSystem文件夹是为了存储某些特定“Microsoft Store”应用程序的数据,因此建议不要删该文件夹,因为删除之后就无法使用指定的应用。

    winreagent是什么文件夹winreagent是什么文件夹Aug 26, 2022 am 11:23 AM

    winreagent是在系统更新或升级的过程中创建的文件夹;该文件夹中通常包含临时文件,当更新或升级失败时,系统将通过还原先前创建的临时文件来回滚到执行更新或升级过程之前的版本。

    baidunetdiskdownload是什么文件夹baidunetdiskdownload是什么文件夹Aug 30, 2022 am 10:45 AM

    baidunetdiskdownload是百度网盘默认下载文件的文件夹;百度网盘是百度推出的一项云存储服务,只要下载东西到百度网盘里,都会默认保存到这个文件夹中,并且可跨终端随时随地查看和分享。

    usmt.ppkg是什么文件usmt.ppkg是什么文件Sep 09, 2022 pm 02:14 PM

    “usmt.ppkg”是windows自带的系统还原功能的系统备份文件;Windows系统还原是在不需要重新安装操作系统,也不会破坏数据文件的前提下使系统回到原有的工作状态,PBR恢复功能的备份文件就是“usmt.ppkg”。

    mobileemumaster是什么文件mobileemumaster是什么文件Oct 26, 2022 am 11:28 AM

    mobileEmuMaster是手机模拟大师的安装文件夹。手机模拟大师是PC电脑模拟运行安卓系统的免费模拟器程序,一款可以让用户在电脑上运行手机应用的软件,支持安装安卓系统中常见的apk执行文件,支持QQ、微信等生活常用应用,达到全面兼容的效果。

    kml是什么文件的格式kml是什么文件的格式Sep 14, 2022 am 10:39 AM

    kml是谷歌公司创建的一种地标性文件格式;该文件用于记录某一地点或连续地点的时间、经度、纬度、海拔等地理信息数据,可以被“Google Earth”和“Google Maps”识别并显示。

    备份文件的扩展名通常是什么备份文件的扩展名通常是什么Sep 01, 2022 pm 03:55 PM

    备份文件的扩展名通常是“.bak”;bak文件是一个备份文件,这类文件一般在'.bak前面加上应该有原来的扩展名,有的则是由原文件的后缀名和bak混合而成,在生成了某种类型的文件后,就会自动生成它的备份文件。

    config是什么文件夹可以删除吗config是什么文件夹可以删除吗Sep 13, 2022 pm 03:48 PM

    config是软件或者系统中的配置文件,不可以删除;该文件是在用户开机时对计算机进行初始化设置,也就是用户对系统的设置都由它来对计算机进行恢复,因此不能删除软件或者系统中的config配置文件,以免造成错误。

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

    PhpStorm Mac バージョン

    PhpStorm Mac バージョン

    最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    強力な PHP 統合開発環境