Is there a way to display the image in the client browser without uploading it to the server?

Question

I am writing a simple book page in ASP.NET MVC. The user can create a book by filling in the title, year, etc. And choosing a cover. When the user clicks the Create button, the form sends the image and data to the action of the Create controller, then I save the image to disk and data to the database.

But I want to display the image when the user selects the image from the dialog box. To do this, as far as I know, I have to upload the image to the server and then display it in the client browser. But if the user cancels the "Create" operation after loading the image, the image will remain on the server’s disk. So how can I handle these temporary images, or is there a way to display the image in the client’s browser without uploading it to the server?

Answer 1

Due to security reasons, you will not be able to display images for users without uploading them to the server. Displaying images from the file system is considered a security risk.

EDIT: , , .

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();
        }
    }
}

.

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 div "thumbnail".

Answer 4

You can do this with simple javascript ...

assign the selected image path .. to the image tag, the prefix file : // , n works the way you want it to be