Question

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

但我希望在用户选择图像文件对话框时显示图像。这样做据我所知，我必须将图像上传到服务器然后在客户端浏览器中显示。但是如果用户在上传图像后取消“创建”操作，图像将保留在服务器的磁盘中。那么如何处理这些临时图像或者有没有办法在客户端浏览器中显示图像而不上传到服务器？

Answer 1

出于安全原因，如果不将图像上传到服务器，您将无法向用户显示图像。从文件系统显示图像被认为是安全风险。

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

Answer 2

是的，使用Silverlight，例如：

在Page.xaml：

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

和Page.xaml.cs：

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        btn1.Click += new RoutedEventHandler(btn1_Click);
    }

    void btn1_Click(object sender, RoutedEventArgs e)
    {
        OpenFileDialog ofd = new OpenFileDialog();
        if (ofd.ShowDialog() == true)
        {
            Stream s = ofd.File.OpenRead();
            BitmapImage bi = new BitmapImage();
            bi.SetSource(s);
            img1.Source = bi;
            s.Close();
        }
    }
}

了解更多here。

Answer 3

是的，你可以使用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：

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

你只需要输入字段和div来显示缩略图图像，输入字段的更改将调用showThumbnail函数，该函数将img附加到“thumbnail”div中。

Answer 4

你可以用简单的javascript ...

来做

将选定的图片路径..分配给前缀为 file：// 的图片代码，n按照您希望的方式工作

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

4 个答案: