Есть ли способ отобразить изображение в браузере клиента, не загружая его на сервер?

Question

Я пишу простую страницу создания книги в ASP.NET MVC. Пользователь может создать книгу, указав название, год и т. Д. И выбрав изображение обложки. Когда пользователь нажимает кнопку «Создать», форма отправляет изображение и данные в действие контроллера, называемое «Создать», тогда я сохраняю изображение на диск и данные в базу данных.

Но я хочу отображать изображение, когда пользователь выбирает изображение по файлу в диалоговом окне. Для этого, насколько я знаю, я должен загрузить изображение на сервер, а затем отобразить в браузере клиента. Но если пользователь отменяет операцию «Создать» после загрузки изображения изображение останется на диске сервера. Как я могу справиться с этими временными изображениями или есть ли способ отобразить изображение в клиентском браузере без загрузки на сервер?

Answer 1

По соображениям безопасности вы не сможете отображать изображения пользователям, не загружая их на сервер. Отображение изображений из файловой системы считается угрозой безопасности.

РЕДАКТИРОВАТЬ: Чтобы удалить неиспользуемые изображения, вы можете создать поток для запуска процедуры очистки, которая будет регулярно удалять их из каталога загрузки.

Answer 2

Да, вы можете использовать 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 3

Да, используя 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 4

Вы можете сделать это с помощью простого javascript ...

назначить выбранный путь к изображению .. тегу изображения с префиксом файла : // , n работает так, как вы хотите, чтобы оно было