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

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

引用文献

1. .closest()
2. .find()
3. .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]);
    }
}