四角枠内にファイルをドラッグオーバーした際、ドロップ用のエリアを表示させたい または、 innerHTMLを非表示にしたい
現在は下記ソースのように、四角枠内(dropエリア)にdropするとそのファイル情報が表示されます。
しかし、ファイル情報によってdropエリアの範囲が狭くなってしまうので、これを改善したいと考えてます。
そこで、下の①か②の方法で改善しようと考えています。
①四角枠内にファイルをドラッグオーバーしたら、別でdropエリアを四角枠内に表示させるようにする
→javascriptから「別でdrop用のエリアを出現させる」部分の実装方法が分からないので教えて欲しいです。
②四角枠内の文字をドラッグオーバー中だけ非表示にする
→innerHTMLを非表示にする方法が分からないので教えて欲しいです。
①または②の問題が解決出来る方がいましたら、ご教授をお願いします。
(function() {
function $id(id) {
return document.getElementById(id);
}
function Output(msg) {
var m = $id("filedrag");
m.innerHTML = msg + m.innerHTML;
}
// ドラッグオーバー時イベント
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
function FileSelectHandler(e) {
FileDragHover(e);
var files = e.target.files || e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
ParseFile(f);
}
}
function ParseFile(file) {
Output(
"<p id = 'MessageParagraph'>name: <strong>" + file.name +
"</strong> size: <strong>" + file.size +
"</strong> bytes" +
"</p>"
);
}
$(function () {
$(document).on('drop dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
});
function Init() {
var fileselect = $id("fileselect"),
filedrag = $id("filedrag"),
submitbutton = $id("submitbutton");
AddFiles = $id("AddFiles")
fileselect.addEventListener("change", FileSelectHandler, false);
var xhr = new XMLHttpRequest();
if (xhr.upload) {
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
AddFiles.style.display = "none";
fileselect.style.display = "none";
}
}
//
if (window.File && window.FileList && window.FileReader) {
Init();
}
})();
/*
Styles for HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
*/
body
{
font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
font-size: 90%;
margin: 10px;
color: #333;
background-color: #fff;
}
#divBody
{
width: 550px;
margin: 0 auto;
text-align: left;
}
#AddFiles{
width: 100px;
height: 25px;
}
#filedrag
{
display: none;
margin: 1em 0;
border: 2px dashed #555;
cursor: default;
padding: 0 10px;
border: 1px solid #999;
width : 550px ;
height:200px;
width : 560px;
overflow-y: scroll;
overflow-x: hidden;
}
#filedrag.hover
{
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}
#MessageParagraph
{
border-bottom:solid 1px;
height:30px;
}
#messages
{
padding: 0 10px;
margin: 0;
border: 1px solid #999;
width : 550px ;
height:200px;
width : 560px ;
overflow-y: scroll;
overflow-x: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset="UTF-8" />
<title>Upload</title>
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
</head>
<body>
<div id="divBody">
<form id="upload" action="index.html" method="POST" enctype="multipart/form-data">
<div>
<div id="filedrag">
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
</div>
</div>
<div>
<button id="AddFiles" type="button" onclick="document.getElementById('fileselect').click();">Add Files....</button>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
</div>
</form>
<script src="filedrag.js"></script>
</div>
</body>
</html>