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

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

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

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

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

Q&A

解決済

1回答

2939閲覧

dropしたファイルを一気にpost送信したいです

shoi

総合スコア40

HTML5

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

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

0グッド

1クリップ

投稿2015/03/19 01:33

編集2015/03/19 01:41

現在のソースは下記の通りです。
現在はファイルがdropされた時点で、dropされたファイルをpost送信していますが、これをuploadボタンを押した時点でdropされている全てのファイルを一気にpost送信したいです。
そこでdropされたファイルオブジェクトを、uploadボタンを押すまで保持しなくてはならないのですが、保持する方法が分かりません。ご教授をお願いします。

lang

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

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

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

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

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

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

guest

回答1

0

自己解決

file objectを格納しているリストをグローバル変数化し、
submit時にformdata.appendでform情報として追加します。

投稿2015/03/20 01:24

shoi

総合スコア40

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問