質問編集履歴

文章の修正

2017/07/28 09:03

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -28,7 +28,9 @@
 ###補足情報(言語/FW/ツール等のバージョンなど)
+PHPとJavascriptにて実際にプログラムを書き、
-Javascriptの関数"upload"を複数回(一回～数十回)実行すると、エラーメッセージが表示されて撮影した画像が消えてしまいます。
+PHPで記述されたHTMLページのボタンからJavascriptの関数"upload"を複数回(一回～数十回)実行すると、エラーメッセージが表示されて撮影した画像が消えてしまいます。
 問題が発生するタイミングは不定期で規則性はありません。

質問書式の改善

2017/07/28 09:03

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- 「問題が起きたため、このWebページを再度読み込みました。」と表示されページの再読み込みが発生する。
1	+ iOSのカメラアプリで撮影を行うとSafari上で「問題が起きたため、このWebページを再度読み込みました。」と表示されて、ページの再読み込みが発生し撮影した画像が消えてしまう。

test CHANGED Viewed

@@ -18,6 +18,28 @@
+###試したこと
+[1]該当ページを画像を10枚撮影するごとに再読み込み
+[2]iPadを半日使用したら再起動
+###補足情報(言語/FW/ツール等のバージョンなど)
+Javascriptの関数"upload"を複数回(一回～数十回)実行すると、エラーメッセージが表示されて撮影した画像が消えてしまいます。
+問題が発生するタイミングは不定期で規則性はありません。
+一回撮影しただけで発生することもありますし、何十回撮影しても発生しないこともあります。
+問題が発生する箇所は決まって、input fileボタンを押しカメラアプリが起動してシャッターを押した直後です。
 ###読み込み元ソース
 ```PHP
@@ -288,21 +310,9 @@
 	// 枠内に送信状況を表示
-	var sending = {
-			frameStatus: '送信中',
-			addClass: 'line_status_sending',
+	//POST送信を行う途中であることをユーザーに通知
-			removeClass: 'line_status_done line_status_fail',
-			b: b,
-			showResend: 'none'
-	};
-	changeImageStatus(sending);
@@ -406,7 +416,7 @@
-			// S3への画像登録成功時
+			// POST送信成功時
 			if(data['is_success'] == true) {
@@ -430,43 +440,17 @@
 				// 枠内に送信状況を表示
-				var sendSuccess = {
-						frameStatus: '送信成功',
-						addClass: 'line_status_done',
+				//POST送信に成功したことをユーザーに通知
-						removeClass: 'line_status_sending',
-						b: b,
-						showResend: 'none'
-				};
-				changeImageStatus(sendSuccess);
-			// S3への画像登録失敗時
+			// POST送信失敗時
 			} else {
-				var sendFailure = {
-						frameStatus: '登録失敗',
-						addClass: 'line_status_fail',
+				//POST送信に失敗したことをユーザーに通知
-						removeClass: 'line_status_sending',
-						b: b,
-						showResend: 'inline'
-				};
-				changeImageStatus(sendFailure);
 			}
@@ -480,298 +464,262 @@
 		}).fail(function(jqXHR, textStatus, errorThrown) {
-				var sendFailure = {
-						frameStatus: '登録失敗',
-						addClass: 'line_status_fail',
+			//POST送信に失敗したことをユーザーに通知
-						removeClass: 'line_status_sending',
-						b: b,
-						showResend: 'inline'
-				};
-			changeImageStatus(sendFailure);
 			// 送信ボタンを有効化
-			changeButtonStatus(true, b);
+			changeButtonStatus(true, b);
+		});
+	}
+	// 撮影画像データ読み込み成功時のイベントハンドラ
+	reader.onload = function(e) {
+		console.log("reader complete");
+		// src属性取得
+		imgSrc = e.target.result;
+		// *****, *****を分解
+		photoParam = e.target.name.split(",");
+		//回転情報を取得
+		ori = getOrientation(imgSrc);
+		// src属性にURLを設定。設定すると即座に非同期のリクエストが飛ぶ
-		});
+		img.src = imgSrc;
 	}
-	// 撮影画像データ読み込み成功時のイベントハンドラ
+	// 画像ファイルをDataURLとして読み込み
+	reader.readAsDataURL($("#pictures" + b)[0].files[0]);
+}
+/**
+ * 画像の送信状況（枠色、メッセージ）を表示し、
+ * @param
+ * stauts: {
+ *  frameStatus: 送信状況のメッセージ
+ *  addClass: 表示したい送信状況のクラス名
+ *  removeClass: 削除したい送信状況のクラス名（複数の場合はスペースで区切る）
+ *  b: 画像番号
+ *  showResend: 再送信ボタン表示・非表示
+ * }
+ */
-	reader.onload = function(e) {
+function changeImageStatus(status) {
+	with(status) {
+		// 枠内に送信状況のメッセージを表示
+		$("#status_pictures" + b).html(frameStatus);
+		// 表示したい送信状況のクラス
+		$("#line_status_pictures" + b).addClass(addClass);
+		// 削除したい送信状況のクラス
+		$("#line_status_pictures" + b).removeClass(removeClass);
+		// 再送信ボタンの表示・非表示設定
-		console.log("reader complete");
+		$("#resend" + b).css("display", showResend);
+	}
+}
+/**
+ * 「ファイルを選択」ボタン、再送信ボタンの表示・非表示を変更する
+ * @param
+ * showFlag: 表示フラグ
+ * true: 表示、false: 非表示
+ * b: 画像番号
+ */
+function changeButtonStatus(showFlag, b) {
+	// 「ファイルを選択」ボタ
+	$("#pictures" + b).prop("disabled", !showFlag);
-		// src属性取得
+	// 再送信ボタン
+	$("#resend" + b).prop("disabled", !showFlag);
+}
+/**
+ * 縦横比を判断して縮小
+ * @param
+ * image: Imageオブジェクト
+ * base64length: データサイズ
+ * width: 画像サイズ(幅)
+ * height: 画像サイズ(高さ)
+ * orientation: 画像回転情報
+ */
+function scaleDownImage(image, base64length , width, height, orientation) {
+	//回転情報が含まれていない
+	if(orientation==undefined){
-		imgSrc = e.target.result;
+		console.log("PC");
+		//高さより幅が大きい画像
+		if(height < width ){
+			var scaleWidth = 960;
+			var scaleHeight = 960 / width * height;
+		}
+		//幅より高さが大きい画像
+		else {
+			var scaleWidth = 960;
+			var scaleHeight = 960 / height * width;
+		}
+	}
+	//回転情報が含まれている
+	else {
+		console.log("iPad");
-		// *****, *****を分解
+		//高さより幅が大きい画像
+		if(height < width ){
+			var scaleWidth = 960;
+			var scaleHeight = 960 / width * height;
+		}
+		//幅より高さが大きい画像
+		else {
+			var scaleWidth = 960 / height * width;
+			var scaleHeight = 960;
+		}
+	}
+	if(1398101 < base64length) {
+		//canvas生成
+		var canvas = $('<canvas></canvas>');
-		photoParam = e.target.name.split(",");
+		var context = canvas[0].getContext('2d');
+		canvas[0].width = Math.floor(scaleWidth);
+		canvas[0].height = Math.floor(scaleHeight);
-		//回転情報を取得
+		//画像縮小
-		ori = getOrientation(imgSrc);
+		context.drawImage(image, 0, 0, image.width, image.height, 0, 0, scaleWidth, scaleHeight);
-		// src属性にURLを設定。設定すると即座に非同期のリクエストが飛ぶ
-		img.src = imgSrc;
 	}
+	else {
-	// 画像ファイルをDataURLとして読み込み
+		//canvas生成
-	reader.readAsDataURL($("#pictures" + b)[0].files[0]);
+		var canvas = $('<canvas></canvas>');
+		var context = canvas[0].getContext('2d');
+		canvas[0].width = image.width;
+		canvas[0].height = image.height;
+		//画像縮小
+		context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
+	}
+	return canvas[0].toDataURL();
 }
-/**
- * 画像の送信状況（枠色、メッセージ）を表示し、
- * @param
- * stauts: {
- *  frameStatus: 送信状況のメッセージ
- *  addClass: 表示したい送信状況のクラス名
- *  removeClass: 削除したい送信状況のクラス名（複数の場合はスペースで区切る）
- *  b: 画像番号
- *  showResend: 再送信ボタン表示・非表示
- * }
- */
-function changeImageStatus(status) {
-	with(status) {
-		// 枠内に送信状況のメッセージを表示
-		$("#status_pictures" + b).html(frameStatus);
-		// 表示したい送信状況のクラス
-		$("#line_status_pictures" + b).addClass(addClass);
-		// 削除したい送信状況のクラス
-		$("#line_status_pictures" + b).removeClass(removeClass);
-		// 再送信ボタンの表示・非表示設定
-		$("#resend" + b).css("display", showResend);
-	}
-}
-/**
- * 「ファイルを選択」ボタン、再送信ボタンの表示・非表示を変更する
- * @param
- * showFlag: 表示フラグ
- * true: 表示、false: 非表示
- * b: 画像番号
- */
-function changeButtonStatus(showFlag, b) {
-	// 「ファイルを選択」ボタ
-	$("#pictures" + b).prop("disabled", !showFlag);
-	// 再送信ボタン
-	$("#resend" + b).prop("disabled", !showFlag);
-}
-/**
- * 縦横比を判断して縮小
- * @param
- * image: Imageオブジェクト
- * base64length: データサイズ
- * width: 画像サイズ(幅)
- * height: 画像サイズ(高さ)
- * orientation: 画像回転情報
- */
-function scaleDownImage(image, base64length , width, height, orientation) {
-	//回転情報が含まれていない
-	if(orientation==undefined){
-		console.log("PC");
-		//高さより幅が大きい画像
-		if(height < width ){
-			var scaleWidth = 960;
-			var scaleHeight = 960 / width * height;
-		}
-		//幅より高さが大きい画像
-		else {
-			var scaleWidth = 960;
-			var scaleHeight = 960 / height * width;
-		}
-	}
-	//回転情報が含まれている
-	else {
-		console.log("iPad");
-		//高さより幅が大きい画像
-		if(height < width ){
-			var scaleWidth = 960;
-			var scaleHeight = 960 / width * height;
-		}
-		//幅より高さが大きい画像
-		else {
-			var scaleWidth = 960 / height * width;
-			var scaleHeight = 960;
-		}
-	}
-	if(1398101 < base64length) {
-		//canvas生成
-		var canvas = $('<canvas></canvas>');
-		var context = canvas[0].getContext('2d');
-		canvas[0].width = Math.floor(scaleWidth);
-		canvas[0].height = Math.floor(scaleHeight);
-		//画像縮小
-		context.drawImage(image, 0, 0, image.width, image.height, 0, 0, scaleWidth, scaleHeight);
-	}
-	else {
-		//canvas生成
-		var canvas = $('<canvas></canvas>');
-		var context = canvas[0].getContext('2d');
-		canvas[0].width = image.width;
-		canvas[0].height = image.height;
-		//画像縮小
-		context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
-	}
-	return canvas[0].toDataURL();
-}
 ```
-###試したこと
-[1]該当ページを定期的に再読み込み
-[2]iPadを定期的に再起動
-###補足情報(言語/FW/ツール等のバージョンなど)
-Javascriptの関数"upload"を複数回(1回～)実行すると、エラーメッセージが表示されてしまいます。
-問題が発生するタイミングは不定期で規則性はありません。
-1回実行した際に発生することもありますし、何十回実行しても発生しないこともあります。
-問題が発生する箇所は決まっており、input fileボタンを押しカメラアプリが起動してシャッターを押した直後です。