上傳前的影像預覽以防在Laravel中插入多行

請截圖我如何添加更多行....

輸入欄位和預覽區域：

<td class="border-0">
 <div class="param_img_holder"></div>
</td>
<td class="border-0">
 <input type="file" class="form-control" name="param_img[]" value="x.pbg">
</td>

預覽腳本：

         $('input[type="file"][name="param_img[]"]').val('');
        //Image preview
        $('input[type="file"][name="param_img[]"]').on('change', function(){
            var img_path = $(this).value;
            var param_img_holder = $('.param_img_holder');
            var extension = img_path.substring(img_path.lastIndexOf('.') 1).toLowerCase();
            if(extension == 'jpeg' || extension == 'jpg' || extension == 'png' || extension == 'gif'|| extension == 'webp'){
                if(typeof(FileReader) != 'undefined'){
                    param_img_holder.empty();
                    var reader = new FileReader();
                    reader.onload = function(e){
                        $('<img/>',{'src':e.target.result,'class':'img-fluid','style':'width:110px; height:70px; margin-bottom:10px;'}).appendTo(param_img_holder);
                    }
                    param_img_holder.show();
                    reader.readAsDataURL($(this)[0].files[0]);
                }else{
                    $(param_img_holder).html('This browser does not support FileReader');
                }
            }else{
                $(param_img_holder).empty();
            }
        });

我面臨的問題是，第一個影像預覽很好。但是當我添加一行時，影像沒有顯示....在這種情況下，我該怎么辦？

uj5u.com熱心網友回復：

您的代碼中有兩個主要問題。

首先，您需要選擇相對于已更改的.param_img_holder元素，而不是DOM 中的所有元素。您可以通過使用關鍵字來參考觸發事件的 ，然后獲取常見的和來實作此目的。inputthisinputclosest()trfind()

此外，jQuery 物件沒有value屬性。你需要val()改用。

這是作業版本，其中包括其他一些改進，例如減少if條件嵌套、使用陣列來保存有效的檔案擴展名以及使用 CSS 樣式而不是行內style屬性。

const validExtensions = ['jpeg', 'jpg', 'png', 'gif', 'webp'];

$('table').on('change', '.file-input', function() {
  const $input = $(this);
  const imgPath = $input.val();
  const $imgPreview = $input.closest('tr').find('.param_img_holder');
  const extension = imgPath.substring(imgPath.lastIndexOf('.')   1).toLowerCase();

  if (typeof(FileReader) == 'undefined') {
    $imgPreview.html('This browser does not support FileReader');
    return;
  }

  if (validExtensions.includes(extension)) {
    $imgPreview.empty();
    var reader = new FileReader();
    reader.onload = function(e) {
      $('<img/>', {
        src: e.target.result,
        class: 'img-fluid'
      }).appendTo($imgPreview);
    }
    $imgPreview.show();
    reader.readAsDataURL($input[0].files[0]);
  } else {
    $imgPreview.empty();
  }
});

.param_img_holder {
  display: none;  
}

.param_img_holder img.img-fluid {
  width: 110px;
  height: 70px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="border-0">
      <div class="param_img_holder"></div>
    </td>
    <td class="border-0">
      <input type="file" class="form-control file-input" name="param_img[]" />
    </td>
  </tr>
  <tr>
    <td class="border-0">
      <div class="param_img_holder"></div>
    </td>
    <td class="border-0">
      <input type="file" class="form-control file-input" name="param_img[]" />
    </td>
  </tr>
</table>

標籤：javascript图片laravel-8

上一篇：ExpoGo在使用captureRef而不記錄任何內容時崩潰

下一篇：將自定義影像添加到我的數字時鐘作為背景