代码之家  ›  专栏  ›  技术社区  ›  Muhammad Muazzam

Jquery不使用用于预览的文件输入

  •  0
  • Muhammad Muazzam  · 技术社区  · 6 年前

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <div class="form-group has-feedback row {{ $errors->has('photo') ? ' has-error ' : '' }}">
      {!! Form::label('photo_lbl', trans('destinations.photoLabelTitle'), array('class' => 'col-md-3 control-label')); !!}
      <div class="col-md-9">
        <div class="input-group">
          {!! Form::file('photo[]', null, array('id' => 'photo_title', 'class' => 'form-control')) !!}      
          <img src="" id="photo_img" width="200px" />
        </div>
        @if ($errors->has('photo'))
          <span class="help-block">
            <strong>{{ $errors->first('photo') }}</strong>
          </span>
        @endif
      </div>
    </div>
    
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          $('#photo_img').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    
    $(document).ready(function() {
      $("#photo_title").change(function() {
        readURL(this);
      });
    });
    
    0 回复  |  直到 6 年前