バックグラウンドでファイルをアップロード
仕様
- input type=fileタグでファイルを選択したら、バックグラウンドにファイルを送信する
- ドラッグアンドドロップでもよいよ
事前準備
PHP
とりあえず受け側をつくっておく
test_009_send.php
<?php
print_r($_FILES);
print_r($_POST);
?>
基本パターン
ひとつのファイルを送る
HTML
test_009_1.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_009_1.js"></script>
<title>test_9_1 バックグラウンドでファイルをアップロード(基本)</title>
</head>
<body>
<form method="post" action="test_009_send.php" enctype="multipart/form-data">
<input type="file" name="myimg" accept="image/*"><br>
<input type="submit" value="go"><br>
</form>
</body>
</html>
javascript
test_009_1.js
$(function() {
$('input[type=file]').on('change',function(){
var fd = new FormData();
var file=$(this).prop('files')[0];
var name=$(this).attr('name');
var fr = new FileReader();
fr.addEventListener("load", function(e){
fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
$.ajax({
"url":"test_009_send.php",
"type":"post",
"data":fd,
"cache":false,
"processData": false,
"contentType": false,
}).done(function(data){
/* 結果表示 */
console.log(data);
});
});
fr.readAsArrayBuffer(file);
});
});
拡張パターン
複数のファイルを送る
HTML
test_009_2.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_009_2.js"></script>
<title>test_9_2 バックグラウンドでファイルをアップロード(拡張)</title>
</head>
<body>
<form method="post" action="test_009_send.php" enctype="multipart/form-data">
<input type="file" name="myimg[]" accept="image/*" multiple><br>
<input type="submit" value="go"><br>
</form>
</body>
</html>
javascript
test_009_2.js
$(function() {
$('input[type=file]').on('change',function(){
var fd = new FormData();
var files=$(this).prop('files');
var len=files.length;
if(len>3) len=3; /*上限設定してもよい*/
var name=$(this).attr('name');
var defarr = [];
var def = new $.Deferred();
for(var i=0;i<len;i++){
defarr.push(setfile(files[i],name));
};
$.when.apply(null,defarr).done(function(){
$.ajax({
"url":"test_009_send.php",
"type":"post",
"data":fd,
"cache":false,
"processData": false,
"contentType": false,
}).done(function(data){
/* 結果表示 */
console.log(data);
});
});
function setfile(file,name){
var def=$.Deferred();
if(!file) return def.resolve();
var fr = new FileReader();
fr.addEventListener("load", function(e){
fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
return def.resolve();
});
fr.readAsArrayBuffer(file);
return def.promise();
}
});
});
拡張パターン2
ドラッグアンドドロップで
HTML
test_009_3.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_009_3.js"></script>
<title>バックグラウンドでファイルを複数アップロード その2</title>
</head>
<body>
<div id="droppable" style="border: gray solid 1em; padding: 2em;">
ファイルをドロップしてください。
</div>
<div id="view"></div></body>
</html>
javascript
test_009_3.js
$(function() {
$("#droppable").on({
"dragenter dragover":function(e){
e.preventDefault();
return false;
},
"drop":function(e){
e.preventDefault();
$('#view').text("");
var ret="";
var defs=[];
var files = e.originalEvent.dataTransfer.files;
$.each(files,function(index,file){
var fr = new FileReader();
var def=$.Deferred();
fr.addEventListener("load", function(e){
var fd = new FormData();
fd.append("myfile", new Blob([e.target.result],{"type":file.type}),file.name );
$.ajax({
"url":"test_009_send.php",
"type":"post",
"data":fd,
"cache":false,
"processData": false,
"contentType": false,
}).done(function(data){
console.log(data);//一応戻り値みておく
ret+="<li>"+file.name+"</li>";
return def.resolve();
});
});
fr.readAsArrayBuffer(file);
defs.push(def.promise());
});
$.when.apply(null,defs).done(function(){
$('#view').html("以下アップロードしました<ul>"+ret+"</ul>");
});
return false;
},
});
});
その他
動作確認
- Win Edge
- Win IE11(古いIEはmultipleで選べない)
- Win Firefox56
- Win Chrome