ソースは下記の通りで、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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。