Question

我先解释一下代码

我有两个视图，我可以预览图像（输入文件）。

查看我有表单的位置，并预览输入文件：

创建项目视图：

<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>

编辑项目视图：

<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]);
        }
});

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

问题

当我编辑项目并选择两个文件时，我只在pathheader中看到新图像的预览，而不是在pathhome中。

为什么在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;">

Answer 2

将HTML TD替换为以下内容：

<tr>
    <!--FOR pathheader-->
    <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>
    <!--FOR pathhome-->
    <td>
        @if (Storage::disk('projects')->has($project->slug))
            <img src="{{ asset('/storage/projects/'.$project->slug.'/home.jpg') }}" id="img2" class="img2" 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>

id＆gt;给出错误的class和pathhome值@if。

Javascript：图片预览无法正常工作

2 个答案: