multipart/form-data
次のHTML コードのような enctypeのフォームがあります。
<form id="myform" action="/parse" method="post" enctype="multipart/form-data">
Name: <input type="text" name="name" id="name" placeholder="Enter your name">
Age: <input type="number" name="age" id="age" placeholder="Enter your age">
Photo: <input type="file" name="image" id="image">
<input type="submit">
</form>
<div id="preview"></div>
これで、次の jQuery コードを使用してプレビュー イメージを表示できます。
$('#image').change(function() {
var file = $(this).get(0).files[0];
//var preview = $('#preview');
var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);
$('#preview').html(img);
var reader = new FileReader();
reader.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
reader.readAsDataURL(file);
$('#preview img').css({'width':'200px'});
});
...そして、私はこの FormData() オブジェクトを持っています:
var data = new FormData();
data.append('name', $('#name').val());
data.append('age', $('#age').val());
画像のデータを FormData() オブジェクトに追加するにはどうすればよいですか?
ありがとう!