89985


**問題**  
画像を表示は出来た。  
**データとして、sqlのデータに保存ができていない。**  
確認で、抽出工程を確認すると画像を指定してあげるとできていた。

**目標**  
laravelで画像を非同期処理でファイルから選択して表示させたい  
また、他ファイルでも表示できるようにする

コメントアウトしてる方、してない方どちらも試しているが表示されない

blade

[code]

    <div id="image">
        <div id="img">
           <img id="preview" width="200" class="img-thumbnail" alt="スノボー">
        </div>  
         <input type="file" id="myImage" name="image" accept="image/png, image/jpeg" />
    </div>
    
[/code]

Controller

[code]

    public function store(SnowRequest $request)
         {
            $snow = new Post();
    
            if($request->hasFile('image')) {
                $snow->image = $request->file('image')->store('public/image');
                $snow->image = $request->image->store('');
            } else {
                $snow->image = null;
            }
    
    
             \DB::beginTransaction();
             try {
                 // 投稿登録
                 $this->snow->InsertSnow($request);
                 \DB::commit();
             } catch(\Throwable $e) {
                 \DB::rollback();
                 abort(500);
             }
             
             \Session::flash('err_msg', '投稿を登録しました。');
             return redirect()->route('snows');
         }
    
[/code]

JavaScript

[code]

       $("#myImage").on("change", function (e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#preview").attr("src", e.target.result);
        }
        reader.readAsDataURL(e.target.files[0]);
       });
    
[/code]

補足として、$snowは、sqlデータを格納している。  
他、足りないことあればコメントお願いします。


CC BY-SA 4.0
2022-07-11T13:09:57.280
89915
2022-07-14T22:00:18.910
2022-07-14T07:10:13.983
51050
51050
question
javascript php jquery laravel
jQueryを使って選択した画像を非同期処理で表示させたい


単純に画像を表示しようとしている`<img>`要素が、おそらくidとして`preview`を指定すべきところがsrcになってしまっているように見えます。

[code]

      <img src="(適当なURL)" id="preview" width="200" class="img-thumbnail" alt="スノボー">
    
[/code]


CC BY-SA 4.0
2022-07-11T13:56:03.397
89917
2022-07-11T13:56:03.397
2376
89915
answer


img 要素の src="preview" が間違っていて id="preview" に直さないと getElementById('preview') でも
$("#preview") でも取得できません。そこを直した上で、以下のようにしてはいかがですか？

(1) input type="file" で画像ファイルが選択されたタイミングで、FileReader に readAsDataURL メソッド
を使って選択された画像ファイルを読み込む。

(2) readAsDataURL は非同期で動くので、読み込み完了のイベントを待ってリスナで処置する必要がある。readAsDataURL
で読み込みが完了すると onloadend イベントが発生するので、それにリスナをアタッチし、そこで下の (3) の処置を行う。

(3) FileReader の result プロパティ を使って、読み込んだ画像ファイルを Data url
形式（"data:image/jpeg;base64, ..." という文字列）で取得し、それを image オブジェクトの src 属性に設定する。


CC BY-SA 4.0
2022-07-11T22:27:11.127
89920
2022-07-11T22:27:11.127
51338
89915
answer


Controllerからmodelに下記を移行した。  
移行の際に、InsetStoreを作成した。  
中に、  
model

[code]

     public function InsertStore($request)
        {
        $snow = new snow();
        
        $snow->image = $request->file('image')->store('public/image');
         snow->image = $request->image->store(''); 
         $image = new snow;
         $image->title = $request->title;
         $image->content = $request->content;
         $image->image = $snow->image;
         $image->save();
        }
    
[/code]

Controller  
InsertSnowをInsertStoreに変更

記載していないが、  
form タグ内にenctype="multipart/form-data"を追加

コメントを頂いた方、本当にありがとうございました。


CC BY-SA 4.0
2022-07-14T22:00:18.910
89985
2022-07-14T22:00:18.910
51050
89915
answer