@csrf
<div class="mb-3">
    <label for="">名稱</label>
    <input type="text" class="form-control " name="Name" placeholder="名稱" value="{{ isset($item)?$item->ClassName:"" }}" required>
</div>
<div class="row">
    <div class="col-4">
        <div class="mb-3">
            <label for="">上傳圖片-1</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="0" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
        <div class="mb-3">
            <label for="">上傳圖片-2</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="1" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
        <div class="mb-3">
            <label for="">上傳圖片-3</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="2" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
        <div class="mb-3">
            <label for="">上傳圖片-4</label>
            <input name="progressbarTW_img[]" class="imgInp" data-index="3" type="file" accept="image/gif, image/jpeg, image/png">
        </div>
    </div>
    <style>
        .img-box{
            border:1px solid rgb(222,222,222);
        }
    </style>
    <div class="col-8 row">
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
        <div class="col-6 img-box"><img class="preview_progressbarTW_img" style="width:100%;" src="#" /></div>
    </div>
</div>
<div class="mb-3">
    <label for="">排序</label>
    <input type="text" class="form-control " name="Order"  placeholder="排序" value="{{ isset($item)?$item->order:"" }}" required>
</div>
<div class="mb-3">
    <label for="">狀態</label>
    <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="open_status" id="customSwitch" @checked(empty($item)?false:$item->Status)>
        <label class="custom-control-label" for="customSwitch"></label>
    </div>
</div>
<input class="btn btn-primary " style="float: right" type="submit">

<script>
    $(".imgInp").change(function(){
        //當檔案改變後，做一些事
        // console.log();
        readURL(this,$(this).data('index'));   // this代表<input id="imgInp">
   });

   function readURL(input,index){
        console.log(index);
        if(input.files && input.files[0]){
            var reader = new FileReader();
            reader.onload = function (e) {
                $(".preview_progressbarTW_img").eq(index).attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

</script>