###iOSで画像ファイルのアップロードを行うとエラーが発生する
HTML,JavaScript,クラシックASPでiOS向けWebアプリを開発しています。
iPhone等で撮影、または画像ファイルを選択し、ファイルサイズを縮小してwebサーバーにアップロードする仕組みを作っています。
ファイルサイズの縮小には、JSを用いてcanvasタグに描画しており、canvasのimageをbase64urlへエンコーディングした文字列をサーバーにPOSTさせています。
アップロードファイルの容量は2~3Mbyte程度で、最大で2つのファイルを指定できるようにしています。
PCでもiOSでも想定通りに動作しますが、iOSでは「このWebページで問題が起きたため、再度読み込まれました。」のメッセージが画面上部に表示され、
さらに画面中央にモーダルダイアログで「本当にこのフォームを再送信しますか?」とのメッセージが表示されます。
このメッセージの原因や解消方法があればご教授いただきたいです。
###発生している問題・エラーメッセージ
このWebページで問題が起きたため、再度読み込まれました。
###該当のソースコード
以下のソースは抜粋です。
HTML
1<input type="file" accept="image/*" capture="camera" name="uploadFile" id="uploadFile" onchange="dispThumbnail()"> 2<canvas id="dispPhoto" name="dispPhoto" width="480" height="360"></canvas>
JavaScript
1function dispThumbnail(){ 2 var select_file = document.getElementById("uploadFile"); 3 var canvas = document.getElementById("dispPhoto"); 4 var file = select_file.files; 5 var reader = new FileReader(); 6 //dataURL形式でファイルを読み込む 7 reader.readAsDataURL(file[0]); 8 //ファイルの読込が終了した時の処理 9 reader.onload = function(){ 10 readDrawImg(reader, canvas, 0, 0); 11 } 12} 13function readDrawImg(reader, canvas, x, y){ 14 var img = readImg(reader); 15 var canvasDefW = canvas.width; // canvasの初期幅 16 img.onload = function(){ 17 var w = img.width; 18 var h = img.height; 19 // 横幅を基準としてリサイズする 20 var resize = resizeWidthHeight(canvasDefW, w, h); 21 drawImgOnCav(canvas, img, x, y, resize.w, resize.h); 22 // CanvasImageのBASE64URIへの変換 23 document.getElementById("base64area").value = canvas.toDataURL("image/png"); 24 } 25} 26//ファイルの読込が終了した時の処理 27function readImg(reader){ 28 //ファイル読み取り後の処理 29 var result_dataURL = reader.result; 30 var img = new Image(); 31 img.src = result_dataURL; 32 return img; 33} 34//キャンバスにImageを表示 35function drawImgOnCav(canvas, img, x, y, w, h) { 36 var ctx = canvas.getContext("2d"); 37 canvas.width = w; 38 canvas.height = h; 39 ctx.drawImage(img, x, y, w, h); 40} 41// リサイズ後のwidth, heightを求める 42function resizeWidthHeight(target_length_px, w0, h0){ 43 //リサイズの必要がなければ元のwidth, heightを返す 44 if(w0 <= target_length_px){ 45 return{ 46 flag: false, 47 w: w0, 48 h: h0 49 }; 50 } 51 // 横幅を基準としたリサイズの計算 52 var w1; 53 var h1; 54 w1 = target_length_px; 55 h1 = h0 * target_length_px / w0; 56 return { 57 flag: true, 58 w: w1, 59 h: h1 60 }; 61}
ASP
1Dim s_cntTotal 2Dim s_getBinary 3Dim s_objBasp21 4Dim s_strBase64 5Dim s_result 6 7s_cntTotal = Request.TotalBytes 8s_getBinary = Request.BinaryRead(s_cntTotal) 9SET s_objBasp21 = server.createobject("basp21") 10 11s_strBase64 = s_objBasp21.Form(s_getBinary, "base64area") 12s_result = ImportCanvas(s_strSaveMapFilePass, s_strBase64) 13 14Function ImportCanvas(param_strFilePass, param_strBase64) 15 Const adTypebinary = 1 ' バイナリデータ 16 Const adTypeText = 2 ' テキストデータ 17 18 Dim stream, xmldom, node 19 Dim strBase64 20 Set xmldom = Server.CreateObject("Microsoft.XMLDOM") 21 Set node = xmldom.CreateElement("base64") 22 node.DataType = "bin.base64" 23 24 strBase64 = Replace(param_strBase64, "data:image/png;base64,","") 'Base64の文字列を渡す 25 If InStr(strBase64, "data:image/") <> 0 Then 26 strBase64 = Replace(param_strBase64, "data:image/jpeg;base64,","") 'Base64の文字列を渡す 27 End If 28 node.text = strBase64 29 Set stream = Server.CreateObject("ADODB.Stream") 30 stream.Type = adTypeBinary 31 stream.Open 32 stream.write node.NodeTypedValue 33 stream.saveToFile param_strFilePass, 2 'ファイルを作成 34 stream.Close 35 Set stream = Nothing 36 37 Set node = Nothing 38 Set xmldom = Nothing 39 40 ImportCanvas = 0 41End Function
###試したこと
- IISの設定「最大要求エンティティボディ制限」の関係かと思いましたが、確認したところ33Mbyteまでの設定になっていたので問題ないようです。
- input要素で選択する元ファイルの容量が小さい(50Kbyte)場合、上記のエラーは発生しませんでした。65Kbyteであれば、エラーが発生しました。
###補足情報(言語/FW/ツール等のバージョンなど)
実行端末:iOS10以上
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。