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

Question

I am writing a simple \"Book\" create page in ASP.NET MVC. User can create book by filling title,year etc.. and selecting a cover image. When user press \"Create\" button Form

Answer 1

You can do it with Simple javascript...

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

Answer 2

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

EDIT: To remove the unused images, you can create a thread to run a cleanup routine to which will delete them from the upload directory regularly.

Answer 3

Yes, you can using 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>

You just need the input field and The div to display the thumbnail image, and on change for the input field will call showThumbnail function which will append img inside the "thumbnail" div.

Answer 4

Yes, using Silverlight, for example:

In Page.xaml:

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

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

Read more here.