ホームページ >バックエンド開発 >PHPチュートリアル >HTML5ファイルのアップロード例
元のアドレス:
http://www.webcodegeeks.com/html5/html5-file-upload-example/
この記事では、HTML5 を使用してユーザーが選択したファイル情報を読み取り、ファイルをアップロードする方法を説明します。
FileApi は HTML5 の最も興味深い新機能の 1 つで、表示されているファイルに関する情報をサーバーにアップロードする前に読み取ることができ、投稿フォームを使用せずにファイルを送信できます。
以下では、Ajaxを使用して、ユーザーが選択したファイル情報を読み取り、それらのファイルを非同期にアップロードする方法を示します。
1. ファイル情報を表示する
1.1:のみの場合1 つのファイル
HTML コードは次のとおりです
<input type="file" id="fileinput" />ユーザーがファイルを選択すると、input 要素は「change」イベントを生成するため、このイベントをリッスンできます:
document.getElementById('fileinput').addEventListener('change', function(){ var file = this.files[0]; // This code is only for demo ... console.log("name : " + file.name); console.log("size : " + file.size); console.log("type : " + file.type); console.log("date : " + file.lastModified); }, false);ご覧のとおり、FileApi は非常に使いやすく、input 要素に「files」属性を追加します。
概要: 「files」属性は書き込み可能ではなく、その内容を読み取ることのみが可能です。これを使用して取得できることに気付きました。files[0] ユーザーが選択した最初のファイルです。
1.2: 複数のファイル
ここで、すべてのファイル情報を表示したいと思います。ユーザーによって選択されました。
HTML コードは次のとおりです
<input type="file" id="fileinput" multiple="multiple" />「multiple」属性を input 要素に追加するだけで、ユーザーはアップロードする複数のファイルを選択できます。
document.getElementById('fileinput').addEventListener('change', function(){ for(var i = 0; i<this.files.length; i++){ var file = this.files[i]; // This code is only for demo ... console.group("File "+i); console.log("name : " + file.name); console.log("size : " + file.size); console.log("type : " + file.type); console.log("date : " + file.lastModified); console.groupEnd(); } }, false);概要: 「accept」タグを追加して、ユーザーがアップロードできるファイルの種類をフィルタリングすることもできます。たとえば、ユーザーに画像のみをアップロードさせたい場合は、MIME タイプ「image/*」をフィルタリングするだけで済みます:
。
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />1.3 ファイルをプレビューする
ファイル情報を読み取ることも、ファイルのコンテンツを読み取ることもできます。たとえば、プレビュー画像を例として挙げます。
は次のとおりです:
JavaScriptを使用してファイルのアップロードを管理します。Preview images Upload images ...
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
gallery.js
var uploadfiles = document.querySelector('#fileinput'); uploadfiles.addEventListener('change', function () { var files = this.files; for(var i=0; i<files.length; i++){ previewImage(this.files[i]); } }, false);previewImage関数は、ユーザーが選択したファイルを表示します。
gallery.js
function previewImage(file) { var galleryId = "gallery"; var gallery = document.getElementById(galleryId); var imageType = /image.*/; if (!file.type.match(imageType)) { throw "File Type must be an image"; } var thumb = document.createElement("div"); thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div var img = document.createElement("img"); img.file = file; thumb.appendChild(img); gallery.appendChild(thumb); // 使用FileReader来显示图片内容 var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); }ファイルの内容を非同期で読み取る FileReader オブジェクトを導入しました。新しい FileReader を使用してオブジェクトをインスタンス化し、readAsUrl メソッドを呼び出してファイルのデータを読み取ります。 ファイル コンテンツが読み取られた後、onload メソッドがイベントのように呼び出され、ファイル コンテンツが画像要素の src 属性に割り当てられます: aImg.src = e.target.result;
2. ファイルをアップロードします
ファイルをアップロードするには XMLHttpRequest (Ajax) を使用します。
ユーザーが選択したすべてのファイルは HTTP リクエストを作成し、サーバーに送信します。
最初に定義しますXMLHttpRequest を含むメソッド ファイルをアップロードするには
function uploadFile(file){ var url = 'server/index.php'; var xhr = new XMLHttpRequest(); var fd = new FormData(); xhr.open("POST", url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // Every thing ok, file uploaded console.log(xhr.responseText); // handle response. } }; fd.append("upload_file", file); xhr.send(fd); }このメソッドは、指定された URL に (post メソッド経由で) ajax リクエストを生成し、「upload_file」リクエスト パラメーターでファイルのコンテンツを送信します。 $_FILES[ を渡すことができます。 'upload_file'] このパラメータを取得するには、
次に、uploadFile メソッドを使用して、選択したファイルをアップロードします。
<input type="file" id="uploadfiles" multiple="multiple" />Js は次のとおりです:
var uploadfiles = document.querySelector('#uploadfiles'); uploadfiles.addEventListener('change', function () { var files = this.files; for(var i=0; i<files.length; i++){ uploadFile(this.files[i]); //上传文件 } }, false);PHP スクリプトは次のとおりです:
if (isset($_FILES['upload_file'])) { if(move_uploaded_file($_FILES['upload_file']['tmp_name'], "datas/" . $_FILES['upload_file']['name'])){ echo $_FILES['upload_file']['name']. " OK"; } else { echo $_FILES['upload_file']['name']. " KO"; } exit; } else { echo "No files uploaded ..."; }3. ダウンロード
すべてのソースコード
上記では、関連する内容も含めて HTML5 ファイルのアップロード例を紹介しています。PHP チュートリアルに興味のある友人に役立つことを願っています。