Question

很难修复我的两个上传文件。我的问题是当我在第一个表单文件中上传照片时，预览会在文件和ngo_logo的两个表单中显示相同的照片，就像我上传照片时一样ngo_logo的第二个表单文件，它在表单中显示相同的照片。第一个总是被覆盖。任何人都可以帮助我在这里非常感谢。

<div class="col-md-6">
         <div class="form-group">
              <label class="control-label">Proof of Accreditation<em>(Upload File)</em>:</label>
            {!! Form::file('file',['class'=>'form‐control','id'=>'file'  ]) !!}
          </div> 
         <div class="form-group">
              <img id="fil" src="#" name="file"  class="img-responsive well" alt="Image" />
          </div>
    </div>
    <div class="col-md-6">
         <div class="form-group">
             <label class="control-label">Organizational Logo:</label>
             {!! Form::file('ngo_logo',['class'=>'form‐control','id'=>'ngo_logo'  ]) !!}
           </div> 
    <div class="form-group">
          <img id="logo" src="#" name="ngo_logo"  class="img-responsive well" alt=" Your Image" />
             </div>
     </div>

/ 的Javascript /

<script type="text/javascript">

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#fil').attr('src', e.target.result);
                //$('#logo').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#logo').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }



    }/**end of function readURL(input)**/
        $("#file").change(function(){
            readURL(this);       
        });
        $("#ngo_logo").change(function(){
            readURL(this);       
        });

</script>

Answer 1

您不需要两次读取文件，只需要定位正确的元素并设置src。

您可以使用DOM关系来定位所需元素并设置SRC。有各种方法可以使用当前元素上下文遍历DOM，即event.target

function readURL(event) {
    var input = event.target;
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(event.target)
            .closest('form-group') //Target parent form control div
            .next() //Target sibling of parent form control 
            .find('img') //Target Ima
            .attr('src', e.target.result); //Set image
        } 
        reader.readAsDataURL(input.files[0]);
    }
}

$("#file, #ngo_logo").change(readURL);

参考

.closest()
.find()
.next()

作为替代方案，您可以使用data-*前缀属性关联元素。

{!! Form::file('file',['class'=>'form‐control','id'=>'file', data-target=>'#fil' ]) !!}
{!! Form::file('ngo_logo',['class'=>'form‐control','id'=>'ngo_logo', data-target=>'#logo' ]) !!}

并在事件处理程序中使用$.fn.data()或Element.dataset属性读取它。

function readURL(event) {
    var input = event.target;
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(event.target).data('target').attr('src', e.target.result);
            //$(event.target.dataset.target).attr('src', e.target.result);
        } 
        reader.readAsDataURL(input.files[0]);
    }
}

Answer 2

{!! Form::file('file',['class'=>'form‐control','id'=>'file'  ]) !!}

将id=>file替换为id=>fil，因为您的图片ID为fil。

<img id="fil" src="#" name="file" class="img-responsive well" alt="Image" />

以一种形式上传两个不同的文件

2 个答案: