ここ
HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード
http://soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4
に、複数ファイルをドラッグ＆ドロップでアップロードする方法について書いてある
・・・がJavascript（クライアント）だけ。
一方、ここ
JavaScript と PHP でドラッグドロップでファイルをアップロードする
http://vosegus.org/blog/2014/08/drop-file-upload.html
に、あるファイルをドラッグ＆ドロップでアップロードする方法について書いてある
が、そもそも、どちらもポイントだけしか書いていない。
欲しいのは、
複数ファイルをドラッグ＆ドロップでアップロードするプログラムの全体
だとおもうので、そのプログラム、HTML(ブラウザ表示部分）とPHP（アップロード部分）
について、ここにまとめてみる
（基本的に上記サイトをまとめただけ）
■お題
以下の表示
を行い、ドラッグアンドドロップ、またはファイルを選択ボタンから、
１つないしは複数のファイルを選択して、サーバーにアップロードする。
サーバー側のプログラムは、PHP,
ブラウザ表示するプログラムはHTML(HTML5 FileAPI+Javascript）
■ブラウザ表示するプログラム test.html
（基本的に上記サイト
「HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード」
の内容を組み合わせたもの）
■サーバー側のプログラムtest.php
HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード
http://soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4
に、複数ファイルをドラッグ＆ドロップでアップロードする方法について書いてある
・・・がJavascript（クライアント）だけ。
一方、ここ
JavaScript と PHP でドラッグドロップでファイルをアップロードする
http://vosegus.org/blog/2014/08/drop-file-upload.html
に、あるファイルをドラッグ＆ドロップでアップロードする方法について書いてある
が、そもそも、どちらもポイントだけしか書いていない。
欲しいのは、
複数ファイルをドラッグ＆ドロップでアップロードするプログラムの全体
だとおもうので、そのプログラム、HTML(ブラウザ表示部分）とPHP（アップロード部分）
について、ここにまとめてみる
（基本的に上記サイトをまとめただけ）
■お題
以下の表示
を行い、ドラッグアンドドロップ、またはファイルを選択ボタンから、
１つないしは複数のファイルを選択して、サーバーにアップロードする。
サーバー側のプログラムは、PHP,
ブラウザ表示するプログラムはHTML(HTML5 FileAPI+Javascript）
■ブラウザ表示するプログラム test.html
（基本的に上記サイト
「HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード」
の内容を組み合わせたもの）
<HTML>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
/*================================================
ファイルをドロップした時の処理
=================================================*/
$('#drag-area').bind('drop', function(e){
// デフォルトの挙動を停止
e.preventDefault();
// ファイル情報を取得
var files = e.originalEvent.dataTransfer.files;
uploadFiles(files);
}).bind('dragenter', function(){
// デフォルトの挙動を停止
return false;
}).bind('dragover', function(){
// デフォルトの挙動を停止
return false;
});
/*================================================
ダミーボタンを押した時の処理
=================================================*/
$('#btn').click(function() {
// ダミーボタンとinput[type="file"]を連動
$('input[type="file"]').click();
});
$('input[type="file"]').change(function(){
// ファイル情報を取得
var files = this.files;
uploadFiles(files);
});
});
/*================================================
アップロード処理
=================================================*/
function uploadFiles(files) {
// FormDataオブジェクトを用意
var fd = new FormData();
// ファイルの個数を取得
var filesLength = files.length;
// ファイル情報を追加
for (var i = 0; i < filesLength; i++) {
alert(files[i]["name"]);
fd.append("files[]", files[i]);
}
// Ajaxでアップロード処理をするファイルへ内容渡す
$.ajax({
url: 'test.php',
type: 'POST',
data: fd,
processData: false,
contentType: false,
success: function(data) {
alert(data);
}
});
}
</script>
</head>
<body>
<div id="drag-area" style="border-style: dotted;background-color: #ffbbff;">
<p>アップロードするファイルをドロップ</p>
<p>または</p>
<div class="btn-group">
<input type="file" multiple="multiple" style="display:none;" name="files"/>
<button id="btn">ファイルを選択</button>
</div>
</div>
</body>
</html>
|
■サーバー側のプログラムtest.php
|
アクセス
トータル
ランキング
