質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2034閲覧

javascriptのdrag&dropで、drop出来るファイル形式を指定する方法が知りたいです

shoi

総合スコア40

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2015/03/13 09:15

ソースは下記の通りで、drop出来るファイル形式に指定はありません。
つまり、どんなファイルでもdrop出来るのが現状です。
これを、drop出来るファイル形式を指定をしたいのですが、方法が分かりません。
例えばtextファイルのみをdrop出来るようにしたいです。

・ソース

lang

1<html> 2<head> 3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 4<style> 5#dragandrophandler 6{ 7border:2px dotted #0B85A1; 8width:400px; 9color:#92AAB0; 10text-align:left;vertical-align:middle; 11padding:10px 10px 10 10px; 12margin-bottom:10px; 13font-size:200%; 14} 15.progressBar { 16 width: 200px; 17 height: 22px; 18 border: 1px solid #ddd; 19 border-radius: 5px; 20 overflow: hidden; 21 display:inline-block; 22 margin:0px 10px 5px 5px; 23 vertical-align:top; 24} 25 26.progressBar div { 27 height: 100%; 28 color: #fff; 29 text-align: right; 30 line-height: 22px; /* same as #progressBar height if we want text middle aligned */ 31 width: 0; 32 background-color: #0ba1b5; border-radius: 3px; 33} 34.statusbar 35{ 36 border-top:1px solid #A9CCD1; 37 min-height:25px; 38 width:700px; 39 padding:10px 10px 0px 10px; 40 vertical-align:top; 41} 42.statusbar:nth-child(odd){ 43 background:#EBEFF0; 44} 45.filename 46{ 47display:inline-block; 48vertical-align:top; 49width:250px; 50} 51.filesize 52{ 53display:inline-block; 54vertical-align:top; 55color:#30693D; 56width:100px; 57margin-left:10px; 58margin-right:5px; 59} 60.abort{ 61 background-color:#A8352F; 62 -moz-border-radius:4px; 63 -webkit-border-radius:4px; 64 border-radius:4px;display:inline-block; 65 color:#fff; 66 font-family:arial;font-size:13px;font-weight:normal; 67 padding:4px 15px; 68 cursor:pointer; 69 vertical-align:top 70 } 71</style> 72</head> 73 74<body> 75<div id="dragandrophandler">ここにドロップしてください。</div> 76<br><br> 77<div id="status1"></div> 78<script> 79function sendFileToServer(formData,status) 80{ 81 var uploadURL ="http://hayageek.com/examples/jquery/drag-drop-file-upload/upload.php"; //Upload URL 82 var extraData ={}; //Extra Data. 83 var jqXHR=$.ajax({ 84 xhr: function() { 85 var xhrobj = $.ajaxSettings.xhr(); 86 if (xhrobj.upload) { 87 xhrobj.upload.addEventListener('progress', function(event) { 88 var percent = 0; 89 var position = event.loaded || event.position; 90 var total = event.total; 91 if (event.lengthComputable) { 92 percent = Math.ceil(position / total * 100); 93 } 94 //Set progress 95 status.setProgress(percent); 96 }, false); 97 } 98 return xhrobj; 99 }, 100 url: uploadURL, 101 type: "POST", 102 contentType:false, 103 processData: false, 104 cache: false, 105 data: formData, 106 success: function(data){ 107 status.setProgress(100); 108 109 $("#status1").append("File upload Done<br>"); 110 } 111 }); 112 113 status.setAbort(jqXHR); 114} 115 116var rowCount=0; 117function createStatusbar(obj) 118{ 119 rowCount++; 120 var row="odd"; 121 if(rowCount %2 ==0) row ="even"; 122 this.statusbar = $("<div class='statusbar "+row+"'></div>"); 123 this.filename = $("<div class='filename'></div>").appendTo(this.statusbar); 124 this.size = $("<div class='filesize'></div>").appendTo(this.statusbar); 125 this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar); 126 this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar); 127 obj.after(this.statusbar); 128 129 this.setFileNameSize = function(name,size) 130 { 131 var sizeStr=""; 132 var sizeKB = size/1024; 133 if(parseInt(sizeKB) > 1024) 134 { 135 var sizeMB = sizeKB/1024; 136 sizeStr = sizeMB.toFixed(2)+" MB"; 137 } 138 else 139 { 140 sizeStr = sizeKB.toFixed(2)+" KB"; 141 } 142 143 this.filename.html(name); 144 this.size.html(sizeStr); 145 } 146 this.setProgress = function(progress) 147 { 148 var progressBarWidth =progress*this.progressBar.width()/ 100; 149 this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% "); 150 if(parseInt(progress) >= 100) 151 { 152 this.abort.hide(); 153 } 154 } 155 this.setAbort = function(jqxhr) 156 { 157 var sb = this.statusbar; 158 this.abort.click(function() 159 { 160 jqxhr.abort(); 161 sb.hide(); 162 }); 163 } 164} 165function handleFileUpload(files,obj) 166{ 167 for (var i = 0; i < files.length; i++) 168 { 169 var fd = new FormData(); 170 fd.append('file', files[i]); 171 172 var status = new createStatusbar(obj); //Using this we can set progress. 173 status.setFileNameSize(files[i].name,files[i].size); 174 sendFileToServer(fd,status); 175 176 } 177} 178$(document).ready(function() 179{ 180var obj = $("#dragandrophandler"); 181obj.on('dragenter', function (e) 182{ 183 e.stopPropagation(); 184 e.preventDefault(); 185 $(this).css('border', '2px solid #0B85A1'); 186}); 187obj.on('dragover', function (e) 188{ 189 e.stopPropagation(); 190 e.preventDefault(); 191}); 192obj.on('drop', function (e) 193{ 194 195 $(this).css('border', '2px dotted #0B85A1'); 196 e.preventDefault(); 197 var files = e.originalEvent.dataTransfer.files; 198 199 //We need to send dropped files to Server 200 handleFileUpload(files,obj); 201}); 202$(document).on('dragenter', function (e) 203{ 204 e.stopPropagation(); 205 e.preventDefault(); 206}); 207$(document).on('dragover', function (e) 208{ 209 e.stopPropagation(); 210 e.preventDefault(); 211 obj.css('border', '2px dotted #0B85A1'); 212}); 213$(document).on('drop', function (e) 214{ 215 e.stopPropagation(); 216 e.preventDefault(); 217}); 218 219}); 220</script> 221</body> 222</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

最終的にはサーバーでファイルを検査する必要があるでしょうが、
ドロップしたfile objectのtypeプロパティでMIMEタイプが取得できるので、

if ( files[0].type !== 'image/jpeg' ) {
alert('JPEGのみ許可');
return;
}

等として、以降の処理をしないようにしてしまうしかないかと思います。

投稿2015/03/13 09:31

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問