html5+ajaxで 画像ファイルをアップロードするサンプルコード

2017年3月6日

1.jQuery版
$('#upJQuery’).on('click’, function() {
var ctn = new FormData();
ctn.append(“upload", 1);
ctn.append(“upfile", $(“#upfile").get(0).files[0]);
$.ajax({
url: “bachi.php",
type: “POST",
processData: false,
contentType: false,
data: ctn,
success: function(d) {
console.log(d);
}
});
});

2.JavaScript版
document.getElementById(“upJS").onclick = function() {
var ctn = new FormData();
var ajax = new XMLHttpRequest();
ctn.append(“upload", 1);
/* ファイルを追加 */
ctn.append(“upfile", document.getElementById(“upfile").files[0]);
ajax.open(“post", “bachi.php", true);

ajax.onload = function () {
console.log(ajax.responseText);
};

ajax.send(ctn);

}