1

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() オブジェクトに追加するにはどうすればよいですか?

ありがとう!

4

1 に答える 1