Javascript:图像预览无法正常工作

Question

我先解释一下代码

我有两个 View ，可以在其中预览图像(输入文件)。

查看我的表单所在位置并预览输入文件:

创建项目 View :

<table>
       <tr>
           <td>
               <img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='">
               <input type="file" name="pathheader" id="pathheader"  class="form-control-file" aria-describedby="fileHelp" style="display:none;">
           </td>
           <td>
               <img src="" id="img2" class="img2" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='">
               <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp" style="display:none;"><br>
           </td>
       </tr>
       <tr>
           <td>
               <input type="button" name="" value="Seleccionar header" id="browse_file" class="btn btn-danger form-control">
           </td>
           <td>
               <input type="button" name="" value="Seleccionar home" id="browse_file2" class="btn btn-danger form-control">
           </td>
      </tr>
</table>

编辑项目 View :

<table>
        <tr>
            <td>
                @if (Storage::disk('projects')->has($project->slug))
                   <img src="{{ asset('/storage/projects/'.$project->slug.'/header.jpg') }}" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">
                @else
                   <img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">
                @endif
                   <input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp" style="display:none;">
            </td>
            <td>
                @if (Storage::disk('projects')->has($project->slug))
                   <img src="{{ asset('/storage/projects/'.$project->slug.'/home.jpg') }}" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">
                @else
                   <img src="" id="img2" class="img2" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">
                @endif
                   <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp" style="display:none;"><br>
           </td>
      </tr>
      <tr>
          <td>
              <input type="button" name="" value="Seleccionar header" id="browse_file" class="btn btn-danger form-control">
          </td>
          <td>
              <input type="button" name="" value="Seleccionar home" id="browse_file2" class="btn btn-danger form-control">
          </td>
       </tr>
</table>

Javascript代码:

$("#browse_file").on('click',function(e){
    $("#pathheader").click();
});
$("#browse_file2").on('click',function(e){
    $("#pathhome").click();
});

$("#pathheader").on('change',function(e){
    var fileInput=this;
    if (fileInput.files[0])
        {
            var reader=new FileReader();
            reader.onload=function(e)
            {
                $("#img").attr('src',e.target.result);
            }
            reader.readAsDataURL(fileInput.files[0]);
        }
});

$("#pathhome").on('change',function(e){
    var fileInput=this;
    if (fileInput.files[0])
        {
            var reader=new FileReader();
            reader.onload=function(e)
            {
                $("#img2").attr('src',e.target.result);
            }
            reader.readAsDataURL(fileInput.files[0]);
        }
});

当我在创建项目 View 上选择图像时，代码可以工作，可以预览文件。

问题

当我编辑项目并选择两个文件时，我只能在路径标题中看到新图像的预览，而不是在路径主目录中看到。

为什么 pathhome 上的新图像预览不起作用？我检查了错误，但没有显示任何错误。

非常感谢，如果需要更多信息或只是认为不清楚，请告诉我，我会尽力更好地解释。

Answer 1

您的 html 代码中有一个拼写错误，也许这就是 JavaScript 无法找到该元素的原因

$("#img2").attr('src',e.target.result);

<td>@if (Storage::disk('projects')->has($project->slug))   <img src="{{ asset('/storage/projects/'.$project->slug.'/header.jpg') }}" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">@else   <img src="" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">@endif   <td>@if (Storage::disk('projects')->has($project->slug))<img src="{{ asset('/storage/projects/'.$project->slug.'/home.jpg') }}" id="img" class="img" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">@else<img src="" id="img2" class="img2" style="width:100%;height:200px;background-color:#ccc;border:2px solid gray;">@endif<input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp" style="display:none;">