Asp.net mvc 有没有办法在客户端浏览器中显示图像而不将其上载到服务器？

我正在用ASP.NETMVC编写一个简单的图书创建页面。用户可以通过填写标题、年份等创建图书。。以及选择封面图像。当用户按下“创建”按钮时，表单将图像和数据发送到名为“创建”的控制器操作，然后我将图像保存到磁盘，将数据保存到数据库

---

但我想在用户选择“按文件选择图像”对话框时显示图像。据我所知，要执行此操作，我必须将图像上载到服务器，然后在客户端浏览器中显示。但如果用户在上载图像后取消创建操作，映像将保留在服务器的磁盘中。那么我如何处理这些临时映像，或者是否有任何方法可以在客户端浏览器中显示映像而不上载到服务器？

您可以使用简单的javascript完成此操作

---

指定选定的图像路径。。要将图像标记作为文件的前缀：//，n由于安全原因，它将按照您希望的方式工作

，如果不将图像上载到服务器，您将无法向用户显示图像。显示文件系统中的图像被视为存在安全风险

---

编辑：要删除未使用的图像，您可以创建一个线程来运行清理例程，定期将其从上载目录中删除。

是，使用Silverlight，例如：

在Page.xaml中：

<StackPanel x:Name="LayoutRoot" Background="White">
    <Button x:Name="btn1" Content="Select image file">
    <Image x:Name="img1">
</StackPanel>

---

阅读更多信息。

是的，您可以使用javascript

Javascript:

function showThumbnail(files){
  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)

    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}

var fileInput = document.getElementById("upload-image");
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

HTML:

---

您只需要输入字段和div来显示缩略图，更改输入字段后，将调用showThumbnail函数，该函数将在缩略图div中附加img。

这是一种安全风险，大多数浏览器不会显示来自本地文件系统的图像。这在InternetExplorer下运行良好，但出于安全目的，Firefox和Mozilla会阻止指向本地文件的链接。如果您对链接到本地内容的风险感到满意，那么您可以覆盖安全策略，还可以在Firefox中启用链接运行后台线程进行清理似乎是最合适的方式。谢谢

function showThumbnail(files){
  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)

    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}

var fileInput = document.getElementById("upload-image");
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

<input type="file" id="upload-image" multiple="multiple"></input>
<div id="thumbnail"></div>