我正在用 ASP.NET MVC 编写一个简单的“书籍”创建页面。用户可以通过填写标题、年份等并选择封面图像来创建书籍。当用户按下“创建”按钮时，表单将图像和数据发送到名为“创建”的控制器操作，然后我将图像保存到磁盘并将数据保存到数据库。
但我想在用户通过文件对话框选择图像时显示图像。据我所知，我必须将图像上传到服务器然后显示在客户端浏览器中。但是如果用户在上传图像后取消“创建”操作，图像将保留在服务器的磁盘中。那么我该如何处理这些临时图像或者有没有办法在客户端浏览器中显示图像而不上传到服务器？
【问题讨论】：
标签： asp.net-mvc
出于安全原因，如果不将图像上传到服务器，您将无法向用户显示图像。显示来自文件系统的图像被认为存在安全风险。
编辑：要删除未使用的图像，您可以创建一个线程来运行清理例程，该例程将定期从上传目录中删除它们。
【讨论】：
是的，例如使用 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。
【讨论】：
是的，您可以使用 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 函数，该函数将在“缩略图”div 中附加 img。
【讨论】：
您可以使用简单的 javascript...
将选定的图像路径分配给以 file:// 为前缀的图像标记，n 它会按照您想要的方式工作
【讨论】：