Input file 图片预览

• 图片预览功能

<div class="form-group">
     <label for="" class="avatar-label">Avatar <span style="color: red;">(200 * 200)</span></label>
     <input type="file" id="file-avatar" name="avatar">

      <br>
      <img class="thumbnail img-responsive" id="file-avatar-img" src="{{ $user->avatar }}" width="200" />
</div>

<div class="well well-sm">
       <button type="submit" class="btn btn-primary">Save</button>
</div>

<script type="application/javascript">
    $(function () {
            $(document).on('change', "#file-avatar", function (event) {
                var _file = $(this);
                var _fileObj = _file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL = windowURL.createObjectURL(_fileObj.files[0]);

                $(document).find('#file-avatar-img').attr('src', dataURL);
            });
        });
    </script>