😛 🦌 👃🏼 jQueryとCodeIgniterを使用したAjaxファイルのアップロード 🧝🏼 🍟 💞

こんにちは

インターネットで長い間、CodeIgniterのAJAXファイルダウンロードの実装に関する情報を探していました。さまざまな開発者がさまざまなテクノロジーと実装例を提供しました。私はそれらのすべてを試しましたが、それらのどれもが同時に十分にシンプルで機能的ではありませんでした。つい最近、 jQuery File Uploaderを発見しました。「彼は他の人と違いはありません」-あなたは言うが、これはそうではありません。その主な違いは、 シンプルさと優れたドキュメントの例です。ドキュメントでは、すべてのコールバックが解析され、すべてのオプションが説明されています。どのシステムでも実装にそれほど時間はかかりません。

今日は、マルチパートアップロードファイルをサーバー+ドラッグアンドドロップでCodeIgniterに整理することが非常に簡単であることを示します。

jQuery File Uploader + CodeIgniter

すぐに、CodeIgniterはライブラリを使用することを提案します$ this-> load-> library（ 'upload'）; 、転送されたファイルを制御し、画像の種類、サイズ、幅、高さでダウンロードを制限できます。これを使用するのは簡単で便利ですが、このライブラリによってINPUTに課せられたわずかな制限に注意する必要があります。 INPUTフィールドのパラメーター名は「userfile」でなければなりません。この事実に同意し、アップロードライブラリを呼び出す関数のコントローラーに移動し、実際にファイルをディスクに保存します。

PHP関数の実装例：

public function upload(){ $config['upload_path'] = "/application/uploads/"; $config['allowed_types'] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar"; $config['max_size'] = 2048; $config['max_width'] = 800; $config['max_height'] = 600; $config['encrypt_name'] = TRUE; $this->load->library('upload', $config); if ($this->upload->do_upload() == false) { $error = array('error' => $this->upload->display_errors()); echo json_encode($error); }else{ $data = $this->upload->data(); echo json_encode($data); } }

注意！ すべてのallowed_typesが機能するためには、欠落しているMIMEタイプを構成ファイル/application/config/mimes.phpに追加する必要があります

ファイルをサーバーに保存する準備ができた関数があります。クライアント側に渡します。 Github jQuery File Uploadからダウンロードする必要があります。プラグインは優れた機能を提供しますが、すべてを使用するわけではなく、いくつかのファイル、drug＆drop、progressallのダウンロードのみを使用します。

必要なJSをダウンロードページに接続します。

  - jquery.fileupload.js - jquery.fileupload-video.js - jquery.fileupload-process.js - jquery.iframe-transport.js - upload.js //    -

CSSファイル：

  - css/jquery.fileupload.css

INPUTをページに追加します。

 <?php echo form_open_multipart('/admin/upload', array('id' => 'fileupload')); ?> <span class="fileinput-button"> <span> </span> <input type="file" name="userfile" multiple> </span> <?php echo form_close(); ?>

あまり残っていません-upload.jsを作成します。これは、INPUTフィールドを変更するイベントをリッスンし、選択したファイルをロードします。「そして、約束のドラッグ＆ドロップはどこにありますか？」あなたは尋ねます。 Drug＆Dropは、jQuery File Uploadのおかげで既に稼働しています。標準のファイル選択ダイアログを呼び出す代わりに、複数のファイルを一度にページにドラッグすることができ、それらのファイルは優先順位に従ってサーバーにアップロードされます。

最後にUpload.js

 $(document).ready(function(){ $('#fileupload').fileupload({ dataType: 'json', progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('.progress .bar').css('width', progress + '%'); }, done: function (e, data) { if(data.result.error != undefined){ $('#error').html(data.result.error); //          $('#error').fadeIn('slow'); }else{ $('#error').hide(); //        $('#files').append("<img class='img-polaroid' style='margin-left:15%;padding:10px;width:auto;height:250px' src=''>"); $('#success').fadeIn('slow'); } } } }); });

データはサーバーからの応答ですが、ダウンロードされたファイルに関する情報を含む配列ではありません。 JSON形式のすべての情報はData.Resultに保存されます。ところで、console.log（データ）は、送信されたファイルの数、エラーなど、多くの興味深いものを見つけるのに役立ちます。

それだけです。素材の有用性を願っています。

jQueryとCodeIgniterを使用したAjaxファイルのアップロード

jQuery File Uploader + CodeIgniter

More articles: