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

Question

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

Answer 1

我怀疑最好的办法是使用HTML5文件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>