Question

这是我用于加载两个图像的代码，但是现在出现了问题，当我单击第一个按钮时，图像出现在第二部分中。问题出在哪里？我希望两个部分完全分开。

<div class="form-group">
    <input type="file" name="pic" id="pic" onchange="loadFile(event)" style="display:none">
    {!! Form::label('pic',' img : ') !!}
    @if(!empty($user->shop_img))
        <img src="{{ url('upload/avatars').'/'.$user->img }}" id="output" width="150" onclick="select_file()">
    @else
        <img src="{{ url('images/pic_1.jpg') }}" id="output" width="150" onclick="select_file()">
    @endif
</div>

<div class="form-group">
    <input type="file" name="picshop" id="picshop" onchange="loadFile(event)" style="display:none">
    {!! Form::label('picshop',' imgshop : ') !!}
    @if(!empty($user->shop_img))
        <img src="{{ url('upload/shop').'/'.$user->shop_img }}" id="outputshop" width="150" onclick="select_file()">
    @else
        <img src="{{ url('images/pic_1.jpg') }}" id="output" width="150" onclick="select_file()">
    @endif
</div>

<script>
    select_file = function () {
        document.getElementById('pic').click();
    };
    loadFile=function (event) {
        var render=new FileReader;
        render.onload=function ()
        {
            var output=document.getElementById('output');
            output.src=render.result;
        };
        render.readAsDataURL(event.target.files[0]);
    }
</script>

<script>
    select_file=function () {
        document.getElementById('picshop').click();
    };
    loadFile=function (event) {
        var render=new FileReader;
        render.onload=function ()
        {
            var output=document.getElementById('outputshop');
            output.src=render.result;
        };
        render.readAsDataURL(event.target.files[0]);
    }
</script>

Answer 1

问题似乎是由于在相同的函数中放置了相同的名称引起的。

您应该将它们分别重命名为select_file1，select_file2，loadFile1和loadFile2。

另外，第二个img中的第二个.form-group的ID为值output。也许您想将其设置为outputshop？

Answer 2

出现问题，是因为浏览器在解析第二个<script>元素后立即覆盖了第一个<script>元素中定义的功能。

对此有两种可能的解决方案。 @emanuelpoletto指出第一个解决方案：使函数的名称唯一，并将适当的onclick和onchange侦听器添加到想要的元素上。

更清洁的解决方案是仅使用一个<script>元素来选择一种不同的书写方式。

loadFile = function (sourceId, outputId) { // ID of source and output given on click
    var reader = new FileReader();         // Always use () with constructors
    var input = document.getElementById(sourceId); // Get the source element
    var output = document.getElementById(outputId);// Get the destination element
    reader.onload = function () {  // Make FileReader ready
      output.src = render.result;
    }
    reader.readAsDataURL(input.files[0]); // Read the file
}

<div class="form-group">
  <input type="file" name="pic" id="pic" style="display:none">
  {!! Form::label('pic',' img : ') !!}
  @if(!empty($user->shop_img))
      <img src="{{ url('upload/avatars').'/'.$user->img }}" id="output" width="150" onclick="loadFile('pic', 'output')">
  @else
      <img src="{{ url('images/pic_1.jpg') }}" id="output" width="150" onclick="loadFile('pic', 'output')">
  @endif

</div>
<div class="form-group">
  <input type="file" name="picshop" id="picshop" style="display:none">
  {!! Form::label('picshop',' imgshop : ') !!}
  @if(!empty($user->shop_img))
      <img src="{{ url('upload/shop').'/'.$user->shop_img }}" id="outputshop" width="150" onclick="loadFile('picshop', 'outputshop')">
  @else
      <img src="{{ url('images/pic_1.jpg') }}" id="outputshop" width="150" onclick="loadFile('picshop', 'outputshop')">
  @endif

</div>

请注意对HTML所做的更改，它们很重要。没有更多的onchange处理函数，可让您摆脱select_file函数的使用。 loadFile函数现在可以完成所有工作，并且可以接收源节点和输出节点的id属性的值。它创建一个新的FileReader，查找输入和输出元素，并从输入节点读取文件。

用JavaScript加载两个图像

2 个答案: