Existe-t-il un moyen d'afficher l'image dans le navigateur client sans la télécharger sur le serveur?

Question

J'écris une simple page de création de livre dans ASP.NET MVC. L'utilisateur peut créer un livre en remplissant le titre, l'année, etc. et en sélectionnant une image de couverture. Lorsque l'utilisateur appuie sur le bouton "Créer", le formulaire envoie l'image et les données à l'action du contrôleur appelée "Créer", puis je sauvegarde l'image sur le disque et les données dans la base de données.

Mais je veux afficher l'image lorsque l'utilisateur sélectionne image par fichier. Pour ce faire Pour autant que je sache, je dois télécharger l'image sur le serveur puis l'afficher dans le navigateur client.Mais si un utilisateur annule l'opération "Créer" image, l'image restera dans le disque du serveur. Alors Comment puis-je faire face à ces images temporaires ou Y at-il un moyen d'afficher l'image dans le navigateur client sans téléchargement vers le serveur?

Answer 1

Pour des raisons de sécurité, vous ne pourrez pas afficher les images aux utilisateurs sans les télécharger sur le serveur. L'affichage d'images à partir du système de fichiers est considéré comme un risque de sécurité.

EDIT: Pour supprimer les images inutilisées, vous pouvez créer un thread pour exécuter une routine de nettoyage à laquelle elles seront régulièrement supprimées du répertoire de téléchargement.

Answer 2

Vous pouvez le faire avec javascript simple ...

définir le chemin d'image sélectionnée .. pour balise image préfixer le fichier : //, n il fonctionne de la façon que vous voulez qu'il soit

Answer 3

Oui, en utilisant Silverlight, par exemple:

En Page.xaml:

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

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

En savoir plus here.

Answer 4

Oui, vous pouvez en utilisant 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> 

Vous avez juste besoin le champ d'entrée et la div pour afficher l'image des vignettes, et sur le changement car le champ d'entrée appellera la fonction showThumbnail qui ajoutera img à l'intérieur du div "thumbnail".