0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SafariでjQueryのAjaxでファイルをUploadできない。

Last updated at Posted at 2019-08-30

#概要
Ajax経由でファイルをUploadしている部分が、MacのSafariブラウザでだけうまくUploadできない現象があった。
safariのバージョンは2019年8月現在の最新版で、確認に使ったバージョンは12.1.1でした。

#結論
SafariでForm要素をclone()で複製した際に、Safariではファイルオブジェクトは空要素としてCloneされるため、挙動が異なります。その結果Safariではファイル要素がアップロードされているようでいて、中身が空になってしまいます。

#詳細
不具合が起きたソースの概略は下記の通り。フォームでファイルを選択すると、Submitボタンを押すことなく、Ajaxで送信し、プレビューに表示するような動作となっています。アップロード中を示す動作や、サーバからのエラー処理などは省いています。

###HTML部分

<img src="/imgages/default.png" id="preview" alt="アップロード画像">
<form action="/fileupload.php" id="fileupload">
    <input type="file" name="upload" id="upload">
</form>

JS部分

$('#upload').on('change', function(e){
    e.preventDefault();
    // 下記の部分でコピーされるデータがSafariと他のブラウザで異なります。
    let cloneFormData = $('#fileupload').clone(); 
    let fd = new FormData(cloneFormData.get(0));
    let url = '/uploader.php';

    $.ajax({
        url: url,
        type: 'post',
        contentType: false,
        processData: false,
        cache: false,
        data: fd
    }).done(function (e) {
        $('#preview').attr('src', e.file.uploaded_url); // プレビュー用の画像を表示
    });
});

jQueryオブジェクトをcloneしている箇所は下記の部分です。
let cloneFormData = $('#form_input_file').clone();

「ネットワーク」タブから送信しているPOSTデータを見てみると、clone()をした場合、下記のようにfilename が取れていません。
image.png
clone()しないで、フォームオブジェクトを直接POSTした場合は下記のようにfilenameが取れています。
(データ本体はSafariでは見えないようで)
image.png
あとは、HTMLプロトコルのヘッダ部分Content-lengthを見ても、何らか大きめのデータをアップしていることが確認できます。
image.png

ちなみにデバッガで送信するフォームデータを見るとcloneしなかった場合でもした場合でも、下記のように見えるので中身がよくわかりません。
image.png

ということで、Safariで ファイルオブジェクトがあるform を clone した場合、
ファイルオブジェクトは空要素としてCloneされるようです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?