如果我没理解错的话，你想在上传之前预览一张图片，对吗？你可以使用一些javascript来实现。
通过设置图像标签的宽度和高度属性，可以模拟缩略图。

$(function() {
  $('#pictureInput').on('change', function(event) {
    var files = event.target.files;
    var image = files[0]
    var reader = new FileReader();
    reader.onload = function(file) {
      var img = new Image();
      console.log(file);
      img.src = file.target.result;
      $('#target').html(img);
    }
    reader.readAsDataURL(image);
    console.log(files);
  });
});

和html：

<form>
  <input type="file" id="pictureInput"> 
</form>
<div id="target">
</div>

您可以在code pen上查看

这在我的例子中是有效的：

$('.file-input').on 'change', (event) ->
    $('.image').attr('src', URL.createObjectURL(this.files[0]))

不需要jQuery，你可以在现代JS中做同样的事情：

const selectElement = document.querySelector('#pictureInput');

selectElement.addEventListener('change', (event) => {
  let files = event.target.files;
  let image = files[0]
  let reader = new FileReader();
  reader.onload = function(file) {
    let img = new Image();
    console.log(file);
    img.src = file.target.result;
    let target = document.querySelector('#target')
    while (target.firstChild) {
      target.removeChild(target.firstChild);
    }
    document.querySelector('#target').appendChild(img)
  }
  reader.readAsDataURL(image);
  console.log(files);
});