jQueryでajaxでファイル送信

今サーバからデータを落とそうとして、うっかり別のZIP ファイルを落としてしまったんだけど、確認したら日付が2012 年のもので、なんだろうと思ったら、共通のプロットからそれぞれがネームを作るという企画に参加した時のデータだった事が分かり思わずゲンドウポーズ決めた。
「Excelファイルから別のExcelファイルに数値データを順番通りに丸写しする」という作業を全部手入力でやってるとは思わなかった……いや、それぞれのやり方だから結果が同じならいいんだけど…それで入力ミスとか言われても…
仕事で使うデータの入ったファイルを開いたら、2年前の今日が最終更新日だった。 2年前の今日って何してたんだろう。
【シムズ4】セーブデータの修復も、今回のパッチ前は修復されたファイルはタイムスタンプも復元されたのに、今回のパッチでは修復した日付に変更されるという改悪ぶり😫!EAさん、仕様をちゃんと考えてからPGしてる?PGしながら漠然と作ってるようにしか見えないんだけど…。#sims4
【購入アカウントの使用方法】 iPhone ①PCとiPhoneを接続し、送られたzipファイルを解凍します ②PCで「iFunBox」をインストールします ③「ユーザーアプリケーション」→「pad」→「Documents」に、解凍したデータを貼り付けます
windowsムービーメーカーってプロジェクトファイルもらっても元の映像データがなければプロジェクトだけもらっても意味がない?? 知り合いが編集した映像がモザイク画質だからエンコードしようと勉強しているのだが・・・誰か教えてエロイ人
二個も上なのに年下から指示されやりたくないって返すの恥ずかしくないの? やらなきゃいけない仕事をふってるのにやりたくなーい、やらなきゃだめ?とかガキか データないとか文句言う前にファイル、USBのなか確認した? 普通わかんなかったらうちじゃなくて先輩に聞くんだよ、自分で
去年の後期のデータ消えた… そもそも写真撮ってたか私…? いっそこうなったらデータも実際のファイルも行方不明って嘘つく…?
ベクのマスターさんの何人かが 「このファイルにベクの悪い噂を作って売りまくった人の個人データが入ってます、これをSMに提出します」 みたいなことツイートしてたの結構一大事だったんね〜〜
マイクラ以前に使ってた自作のガラスの透明度が高いリソースパック導入しようと外付けHDDのデータを探したけど圧縮前のもの含めたデータが全然ない! ついでに作成時のpsdファイルもない!
情報漏えいやセキュリティ強化の観点からか、VDI環境下でデータを扱う傾向になってきてちゃんとできてる可の検証で忙しい。 ファイルの出し入れも許可制だし…ちゃんとした会社は面倒臭い。 きれいな水は済みにくい。会社のパソコンでTwitterもできないしー。
兄からパソコンを頂いたがこれでデジタルやるのはどうかなと思う そしてなによりカメラのデータいれるファイルをインストールしようと思ったらディスクを入れる場所がない! ディスクが入れれない! インストールできないじゃねぇか!ಠ_ಠ

jQueryを使っている状態での方法で書いておくが、基本的に同様の考え方でファイル送信は実装できると思います。
今回は画像データを対象にしているが、基本的に他のファイルでも可能と思われます。

jQueryならonメソッドでフォームがsubmitされたときのイベントを定義します。
ファイルはvar formData = new FormData($(this).get(0));FormDataを生成して、ajaxでそのデータを送ります。

<form action="/upload" method="post" enctype="multipart/form-data" id="imgForm">
  <fieldset>
    <input type="file" name="file" id="sendFile">
    <button type="submit">送信</button>
  </fieldset>
</form>
  // 画像をアップロード
  $('#imgForm').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData($(this).get(0));
    $.ajax($(this).attr('action'), {
      type: 'post',
      processData: false,
      contentType: false,
      data: formData,
      success: console.log('send!'); // 送信に成功したとき
    }).done(function(response){
      console.log('succes!');  // レスポンスがあったとき
    }).fail(function() {
       console.log('error!'); // エラーが発生したとき
    });
    return false;
  });

僕が実装したときの都合上不要なタグ等も含まれていますがおそらく問題なく動くと思えます。

参考

お世話になります。Ajaxで画像ファイルをPHPに送信するというプログラム書いております。今現在、Ajaxでファイル自体の転送が出来ている感じで、PHP側では$_FIlESを受け取
# したいこと 簡易チャットアプリ作成中。 Ajaxを用いてテキストと画像データを投稿できるようにしたい。 JavaScriptが難しかったので以下メモを残します。理解が間違ってい
今回はjQueryのAjax関数を使用して、非同期通信を行う方法をご紹介します。Ajaxを使うことでページ遷移をせずにコンテンツを書き換えることができ、ユーザビリティの向上に繋がり
[紹介元] jQueryタグが付けられた新着投稿 – Qiita jQueryでajaxでファイル送信

  • コメント

    1. 匿名希望
      2017/09/13(水) 15:49:38

      【シムズ4】セーブデータの修復も、今回のパッチ前は修復されたファイルはタイムスタンプも復元されたのに、今回のパッチでは修復した日付に変更されるという改悪ぶり😫!EAさん、仕様をちゃんと考えてからPGしてる?PGしながら漠然と作ってるようにしか見えないんだけど…。#sims4

    2. 匿名希望
      2017/09/13(水) 15:49:38

      仕事で使うデータの入ったファイルを開いたら、2年前の今日が最終更新日だった。
      2年前の今日って何してたんだろう。

    3. 匿名希望
      2017/09/13(水) 15:49:38

      「Excelファイルから別のExcelファイルに数値データを順番通りに丸写しする」という作業を全部手入力でやってるとは思わなかった……いや、それぞれのやり方だから結果が同じならいいんだけど…それで入力ミスとか言われても…

    4. 匿名希望
      2017/09/13(水) 15:49:38

      今サーバからデータを落とそうとして、うっかり別のZIP ファイルを落としてしまったんだけど、確認したら日付が2012 年のもので、なんだろうと思ったら、共通のプロットからそれぞれがネームを作るという企画に参加した時のデータだった事が分かり思わずゲンドウポーズ決めた。

    5. 匿名希望
      2017/09/14(木) 00:20:36

      兄からパソコンを頂いたがこれでデジタルやるのはどうかなと思う

      そしてなによりカメラのデータいれるファイルをインストールしようと思ったらディスクを入れる場所がない!
      ディスクが入れれない!
      インストールできないじゃねぇか!ಠ_ಠ

    記事に戻る

関連記事