| <?php
if( isset( $_FILES["tfiles"]["error"] ) ) {
foreach( $_FILES["tfiles"]["error"] as $key => $UStatus ) {
sleep(1); //テストのため1秒待つ。実用のためには不要なのでコメントアウトする
if( $UStatus === UPLOAD_ERR_OK ) {
$tmp_name = $_FILES["tfiles"]["tmp_name"][ $key ];
$name = $_FILES["tfiles"]["name"][ $key ];
mb_language("Japanese");
$name1=mb_convert_encoding($name, "SJIS", "utf-8");
move_uploaded_file( $tmp_name, "./$name1" );
print "ファイル[ ".$name1." ]を受け取りました。<br>\n";
}
}
exit;
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=S-JIS">
<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>
<script>
var G_files="";
$(function () {
var showFiles = function (files) {
if (files.length==0) return false;
//ファイル名一覧を作る
var filelist = "";
for(var i=0; i<files.length; i++){
filelist += files[i].name + "<br>";
}
$("#mylist").html(filelist);
return false;
};
var uploadFiles = function (files) {
if (files=="") return;
document.body.style.cursor = 'wait';
// FormData オブジェクトを用意
var fd = new FormData();
// ファイル情報を追加する
for (var i = 0; i < files.length; i++) {
fd.append("tfiles[]", files[i]);
}
// XHR で送信
$.ajax({
//url: "xxxx.php", //formではaction=に記述する名前，省略時は自分自身
type: "POST",
data: fd,
mode: 'multiple',
processData: false,
contentType: false,
timeout: 10000, // 単位はミリ秒
error: function(XMLHttpRequest, textStatus, errorThrown){
err=XMLHttpRequest.status+"\n"+XMLHttpRequest.statusText;
alert(err);
//urlが不正など通信以上の場合は 404 not found などが表示される
//urlが正しいが返信内容が不正の場合は 200 OK が返されるが
document.body.style.cursor = 'auto';
$("#sendfiles").attr('disabled', false);
$("#fileselect").attr('disabled', false);
$("#cancel").attr('disabled', false);
},
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
//ajaxのテキスト受信がShift_JISであることを設定
//作業が終わった時のデータの受信でSHIFT-JISが使われているため
//utf8が使われていれば，この作業は不要
$("#sendfiles").attr('disabled', true);
//ボタンを無効にして二重送信防止
$("#fileselect").attr('disabled', true);
$("#cancel").attr('disabled', true);
}
})
.done(function( res ) {
$("#report").html(res);
document.body.style.cursor = 'auto';
$("#sendfiles").attr('disabled', false);
$("#fileselect").attr('disabled', false);
$("#cancel").attr('disabled', false);
$("#cancel").click();
});
};
// ファイル選択フォームからの入力
$("#fileselect").bind("change", function () {
// 選択されたファイル情報を取得
G_files = this.files;
//ファイル表示
showFiles(G_files);
});
//送信ボタン
$("#sendfiles").bind("click", function (e) {
// アップロード処理
uploadFiles(G_files);
});
//キャンセルボタン
$("#cancel").bind("click", function (e) {
$("#mylist").html("Drop File(s)");
G_files="";
$("#fileselect")[0].value = "";
});
// ドラッグドロップからの入力
$("#target").bind("drop", function (e) {
// ドラッグされたファイル情報を取得
G_files = e.originalEvent.dataTransfer.files;
//ファイル表示
showFiles(G_files);
// false を返してデフォルトの処理を実行しないようにする
return false;
})
.bind("dragenter", function () {
// false を返してデフォルトの処理を実行しないようにする
return false;
})
.bind("dragover", function () {
// false を返してデフォルトの処理を実行しないようにする
return false;
});
});
</script>
</head>
<body>
<h2>File Upload by Drag and Drop</h2>
<div id="report"></div>
file selecter<br>
<input id="fileselect" type="file" multiple="multiple" />
<br><br>
Drag and Drop area<br>
<div id="target" draggable="true" style="width:500px;background:#ffcccc;border:#ff0000 solid 1px;">
<br />
<div id="mylist">Drop File(s)</div>
<br />
</div>
<input id="sendfiles" type="button" value="送信"">
<input id="cancel" type="button" value="キャンセル"">
</body>
</html>
|
