在asp.net mvc中的图片框上上传带有预览的图像 [英] Upload images with preview on picture box in asp.net mvc

问题描述

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

I want to upload image in asp.net mvc like this way.I am using input type file for uploading images , its working fine but I want that when user click on this image and select that image , that image would appear on this type of box , how would I do that . I am saving images path in database and putting them on file directory.

推荐答案

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

I suspect the best bet is to use the HTML5 file API to read the contents of the attached image to display a preview. When the user submits the file you could do the server-side processing as you currently are, store the URL and return to the browser the location of the new image for proper preview. But check the performance of previewing a large image.

该链接显示了预览文件的示例.我也已在此处复制了代码，但是请查看文章以更好地理解.

The link shows an example of previewing the file. I've copied the code in here as well, but please check the article for better understanding.

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>

这篇关于在asp.net mvc中的图片框上上传带有预览的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！