form タグのない HTML の input 要素をつかってファイルをアップロードする方法

JavaScript

なんかめっちゃひさしぶりに記事書きます。 Day One でためてきゃいいわーってなってて、 アウトプットはプライベートになってました。

file upload - Sending multipart/formdata with jQuery.ajax - Stack Overflow

sample code

function hoge(formData){
  var dfd = $.Deferred();
  return $.ajax({
    url: '/api/check_icon',
    type: 'POST',
    scriptCharset: 'utf-8',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'json',
    cache : false,
    async: false
  }).then(function(res) {
    if(res.status == 'SUCCESS') {
      dfd.resolve();
    } else {
      dfd.reject();
    }
    return dfd.promise();
  }, function(e, s) {
    dfd.reject();
    return dfd.promise();
  });
}
var data = new FormData();
data.append('homeImg', $('#inputFile')[0].files[0]);
hoge(data).done(function(data){
  console.log(data);
  //after();
});

html

<input type="file" id="inputFile">

このコードでは、ID が inputFile の input['file'] で設定されているファイルを homeImg というパラメータ名でサーバに非同期処理でアップロードするサンプルです。

enctype での multipartform-data 設定はなくてもいけます。 new FormData したオブジェクトに、append で名前と input['file'] 要素をいれてるのがミソです。 ほかの文字列パラメータや複数画像ももちろん設定できます。 アップロードサイズには気をつけてください。