0

現在は下記ソースのように、四角枠内(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>

2 件の回答 2

0

ドラッグ領域と、テキストを挿入する対象が同じ要素#filedragになっていることが良くないのではないかと思いました。

四角枠内にファイルをドラッグオーバーしたら、別でdropエリアを表示させるという発想を転換し、はじめから四角枠内にドラッグ領域表示させれば良いと思います。

つまり、現在のドラッグ領域の外に、テキストを挿入するための新しいコンテナ<div id="filelist"></div>など作成し、それらを更なる新しいdivで囲ってborder: 1px solid #999;してみてはいかがでしょうか。

話がそれますが、コードを見たところjQueryを利用しているように思いますがfunction $id(id)などを独自定義していることも気になりました。jQueryを利用するならばvar m = $id("filedrag");は初めからvar m = $("#filedrag")と記述できます。

0

②の解決方法です

            <div id="filedrag">
                <div id="innerHTML用">
                  ~
                </div>
            </div>

上記の構成で、innerHTMLはinnerHTML用divに出力します。

表示/非表示にはstyle.display = "block" or "none";を使用して、
innerHTML用divをドラッグオーバーイベントで非表示にし、innerHTML出力後に表示に戻します。

しかしdropしていない場合はinnerHTMLが非表示のままになってしまいます。

  // ドラッグオーバー時イベント
    function FileDragHover(e) {
    // innerHTMLを非表示
        var m = $id("massageArea");
        m.style.display = "none";
        // イベントハンドラの伝播抑制
        e.stopPropagation();
        // ブラウザの挙動抑制
        e.preventDefault();
        // クラス名取得
        e.target.className = (e.type == "dragover" ? "hover" : "");
        m.style.display = "block";

ひとつのfunction内で表示/非表示の処理を実行すると、上手く動作しています。
おそらく、かなりごり押しの方法だと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。