在asp.net mvc中的图片框上上传带有预览的图像

Question

我想像这样在 asp.net mvc 中上传图片。我正在使用输入类型文件上传图片，它工作正常，但我希望当用户单击此图片并选择该图片时，该图片会出现在这种类型的盒子，我该怎么做。我正在将图像路径保存在数据库中并将它们放在文件目录中。

Answer 1

我怀疑最好的办法是使用HTML5 file API 读取附件图像的内容以显示预览。当用户提交文件时，您可以像当前一样进行服务器端处理，存储 URL 并将新图像的位置返回给浏览器以便正确预览。但是请检查预览大图像的性能。

该链接显示了预览文件的示例。我也复制了这里的代码，但请查看文章以获得更好的理解。

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
          '" title="', escape(theFile.name), '"/>'
        ].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

.thumb {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>