Soon Forget…

久々にコーディングネタ。HTMLのフォームを使わず、ファイル選択のアイテムだけを使って画面遷移しないでファイルをアップロードする方法。
動作条件として、FormDataオブジェクトが使えるブラウザ（Chrome7、FF4、Safari5、IE10以降など）じゃないといけない。(動作未確認。。。）

・HTML側に乗せるコード。
1.　ページのどこかに下記コード(ファイル選択フォームアイテム)を入れる。FORMタグはなくてもいい。

<input type="file" name="uploadfile" id="upload" />

2.　JavaScript部分（ヘッダに記述）　上記ID=”upload”　に変更があったら呼ばれる。ここではJQuery使用。

$(function(){
    $('#upload').on("change", function(){
        if (window.FormData){             //　FormDataにブラウザが対応しているかチェック
            var fileObj = $('#upload')[0].files[0];    // ファイルオブジェクトの取り出し
            if ( fileObj != null ){
                fileupload(fileObj);
            }
        }else{
            alert("このブラウザはFormDataに対応していません。");
            return null;
        }
    });
});

3.　上から呼ばれるfileupload()関数

function fileupload(fileObj){
    var fd = new FormData();            //　FormDataオブジェクト生成
    fd.append('uploadfile', fileObj);    //フォームアイテム名でオブジェクトをfdに追加
    $.ajax({
        url: 'fileupload.php',    //　ファイルを渡すPHPファイル
        type: 'POST',
        processData : false,    //　重要！これがないと動作しない
        contentType : false,    //　重要！これがないと動作しない
        dataType : "text",
        data: fd
    })
    .done( function(text){
        console.log(text);
    });
}

ファイル選択でアップロード　processData、contentTypeをfalseにしないとJQueryが整形してしまうので必ずこれらにfalseをセットすること。

・呼ばれるPHPのコード(fileupload.php)

$sSavePath = UPLOAD_FOLDER; //ファイル保存先のパス
$config = array();
$config['upload_path'] = $sSavePath;
$config['max_size'] = MAX_UPLOAD_SIZE;        // Max upload filesize 300(kb)
$config['max_width'] = MAX_IMAGE_PIXELS;      // Max Image width 1280px
$config['max_height'] = MAX_IMAGE_PIXELS;     // Max Image height 1280px
$config['overwrite'] = TRUE;        // File Overwrite enable
$config['allowed_types'] = "gif|png|jpg";
$config['file_name'] = $_FILES['uploadfile']['name'];
$this->load->library('upload', $config);

if ( !$this->upload->do_upload('uploadfile') ){
    echo "Upload Failed.";
    return FALSE;
} else {
    echo "Upload Success.";
}

※　ここではCodeIgniter使用。もちろん普通にPHPのみでもOk.