ドラッグアンドドロップ機能に取り組んでいます。ドロップエリアにファイルをドロップしたときにファイルをキャッチするために必要なコードがありますが、jQueryまたはajaxを介して送信できないため、xmlhttprequestでファイルを送信する際に問題が発生します。
私は今、隠しiFrameについて考えていますが、ユーザードロップのおかげで、既存のフォームにこのファイルを添付する方法がわかりません。
var droparea = $('#dropzone');
var uploadButon = $('#upload');
droparea.on('dragover',function(){
$(this).addClass('dragover');
return false;
});
droparea.on('dragleave',function(){
$(this).removeClass('dragover');
return false;
});
droparea.on('drop', function(e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('dragover');
var files = e.originalEvent.dataTransfer.files;
var formData = new FormData($("form")[0]);
for( var i = 0; i < files.length; ++i ) {
var file = files[i];
formData.append("files[]", file);
}
return $.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(text) {
alert(text);
}
});
});
//the php
<?php
echo count($_FILES["files"]);
for($i = 0; $i < count($_FILES["files"]["name"]) ; $i++)
{
if(move_uploaded_file($_FILES["files"]["tmp_name"][$i], "upload/".$_FILES["files"]["name"][$i]))
echo "ok";
else
echo "no";
}
?>