HTML %h3.btnaa ファッション画像 = form_for @tweet do |form| = form.text_field :title, placeholder: "タイトル" .sectionimages .subsubsub .subsubimagebox %span.icoico %span.icoimage NO IMAGE .mainmainimage %p.mainajaxmain = form.file_field :image, class: "image_form" %span.textextx 写真アップロード #jqueryで以下を記載 $(function(){ //画像ファイルプレビュー表示のイベント追加 fileを選択時に発火するイベントを登録 $('form').on('change', 'input[type="file"]', function(e) { var file = e.target.files[0], reader = new FileReader(), $subsubimagebox = $(".subsubimagebox"); t = this; // 画像ファイル以外の場合は何もしない if(file.type.indexOf("image") < 0){ return false; } // ファイル読み込みが完了した際のイベント登録 reader.onload = (function(file) { return function(e) { //既存のプレビューを削除 $subsubimagebox.empty(); // .prevewの領域の中にロードした画像を表示するimageタグを追加 $subsubimagebox.append($('<img>').attr({ src: e.target.result, width: "150px", class: "subsubimagebox", title: file.name })); }; })(file); reader.readAsDataURL(file); }); });
再読み込みしないと画像がアップロードされません。
以下のNO IMAGEの部分にアップロードしたい画像を載せたいのですが、たまにしかアップロードされません。
クラス名の確認もしましたがリロードされない原因はなぜでしょう。
あなたの回答
tips
プレビュー