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

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

新規登録して質問してみよう
ただいま回答率
85.50%
アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

364閲覧

jQueryを使った画像アップロード処理で、iphoneからキャプチャ画像がアップできないバグがあるのでその対処方法

murapon

総合スコア22

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

2クリップ

投稿2019/08/30 08:53

以下のような、jQueryを使った画像アップロード処理を実装したのですが、
iphoneを使って画像をアップする際に、403エラーが発生しました。

javascript

1var fd = new FormData(); 2fd.append("title", title); 3fd.append("message", message); 4fd.append("image", image); 5$.ajax({ 6 url: [送信先URL], 7 type: "POST", 8 data: fd, 9 processData: false, 10 contentType: false, 11 dataType: 'json' 12}).done(function( data ) { 13 if(data.message != null){ 14$('#comp_result').html(data.message); 15 } 16 return false; 17}).fail(function(jqXHR, textStatus, errorThrown) { 18 $('#comp_result').html("<p>予期せぬエラーが発生しました。<br>お手数ですが最初からやり直すか、頻繁に起きる場合は管理者までご連絡ください<br>" + 19"XMLHttpRequest.status:" + jqXHR.status + "<br>" + 20"textStatus:" + textStatus + "<br>" + 21"errorThrown:" + errorThrown.message + 22"</p>"); 23});

403は、XMLHttpRequest.statusの値で確認しました。
送付先サーバーにアクセスログが記録されないので、サーバーに通信する前にエラーになっている模様です。

画像によってはアップすることができ、調査した限りですと、キャプチャした画像のアップのみできません。
カメラで撮影した画像や、android端末からは、問題なく送信できます。
iphoneの複数端末で確認できたのでOSの違い等は関係がないかと思っております。

同様の現象に対応された方、解決等あるからご教授願えないでしょうか?
もしくは、他に、画像とテキストの両方を一度に送信できる方法がありましたら教えてもらえませんでしょうか。
FineUploaderを調べたのですが、画像のみのサンプルしかなく、画像とテキスト両方を送信する方法がわからなかったので。

よろしくお願いいたします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/08/31 01:44

エラーが発生したとき、fail()のtextStatusはどうなっていますか?
x_x

2019/09/02 02:14

image はどのように作っているのでしょうか? capture 属性を使っていますか?
murapon

2019/09/02 02:53

RYNOさん XMLHttpRequest.status:403 textStatus:error errorThrown:undefined と表示されます。 textStatusは、error です。
murapon

2019/09/02 02:58

x_xさん imageは、html側で、 <input id="image" type="file" name="file" multiple="multiple"> とし、ファイルを選択したタイミングで、 javascriptで $('#image').on("change", function() { image = this.files[0]; ・・・・ } で取得しています。 capture属性は使っていません。
x_x

2019/09/02 03:14

エラーになるファイルとエラーにならないファイルではサイズ等が違うのでしょうか?
murapon

2019/09/02 03:51

エラーになったファイルは300KBくらいです。 それより大きいサイズのファイルでも、カメラで撮影したものはアップできました。なのでサイズは関係ないかと思います。
Dot

2019/09/06 01:24

5,6年前ハマったような気が iphoneの場合のimage onload処理の書き方が違ったような?(うろ覚え)
murapon

2019/09/06 02:12

そうなんですねー。 色々調べたのですがわからなかったので、base64で変換して、テキストにした上で送信しサーバーで元に戻す方式で実装することにしました。
Dot

2019/09/06 02:17

おつかれさまです
Dot

2019/09/07 00:59

image onloadとは別件そうですね Javascript側 fd.append("image", image); -> fd.append("image",$(this)[0].files[0]); dataType: 'json' -> //dataType: 'json' php側 $imginfo = getimagesize($_FILES['image']['tmp_name']); $title=$_POST['title']; $message=$_POST['message']; 403の出し方はわかりませんが 変更したらipad ios12.4(iphoneは持ってない),android ver9ではいけました
murapon

2019/09/07 02:19

ありがとうございます。 そうなんですね!今度やってみます。 403は、iosで事前に画面キャプチャしておいて、ファイルアップロード時にそのキャプチャした画像を選択してアップすると出ます。 その場でキャプチャした物や、カメラで撮影した物は問題ありませんでした。 事前にキャプチャしたものだけです。 他の人にやってもらったところ、事前キャプチャした画像でもEXIF情報がついていると失敗して、 ついていないと成功したそうです。 事前キャプチャした画像のEXIF情報を、ツールを作って削除した上でアップしたそうです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問