最終課題 メルカリ
今行なっている部分は商品出品ページの画像を複数生成することです
見本で 、このように表示するようにコードを書いています。
書いている部分はJavaScriptという言語に書いています。
実際のコードはこちらです。
$(document).on('turbolinks:load', ()=> {
var images = ;
$(function(){
$('form').on('change', 'input[type="file"]','#image' ,function(e) {
var file = e.target.files[0],
reader = new FileReader(),
t = this;
if(file.type.indexOf("image") < 0){
return false;
}
reader.onload = (function(file) {
return function(e) {
src: e.target.result,
width: "110px",
height: "110px",
title: file.name
}));
};
})(file);
reader.readAsDataURL(file);
images.push('<img>');
var new_image = $(`<input multiple= "multiple" name="product_images[image]" type="file"
id="image" image =${images.length} style = display:none>`);
$(".image_box").prepend(new_image);
});
});
});
上から自分の言葉で説明します。
$(document).on('turbolinks:load', ()=>
{var images = [];
この部分はまず繰り返し行えるようにするターボリンクとimageの配列を記述してます。
このターボリンクがないと、いちいちリロードを押さないといけなくなります。
$(function(){
$('form').on('change', 'input[type="file"]','#image' ,function(e) {
var file = e.target.files[0],
reader = new FileReader(),
t = this;
if(file.type.indexOf("image") < 0){
return false;
}
reader.onload = (function(file) {
return function(e) {
src: e.target.result,
width: "110px",
height: "110px",
title: file.name
}));
};
})(file);
この部分はまず、functionでかっこの中の部分に何らかの行動をさせるようにします。
formという部分にtype,fileというファイルに変えるというイベントを発火させてます。
０番目のファイル（０番目は表示上１番目）にnew.filereeaderという新しいファイルを生成し、previewというクラスに新しい画像を表示させる記述です。
ifの部分はあってもなくても今の段階は大丈夫です。
次のreader.on.loadは上で定義したreaderはnew.filereeaderを読み込んでいます。
return以下の部分も重要です。
src以下の記述は画像を表示させる詳細の記述です。
