今天朋友问了我一个奇怪的需求:项目中要求图片上传到工作目录,上传后要在网页中通过<img>显示出来。图片上传后显示,在开发中常见的做法是将它图片上传到网站目录下(upload/),如果保存到别的目录(如:d:/upload),再用<img src="d:/upload/xxx.jpg"> 是找不到图片的。

想到了两种解决方法:

第一种:给路径加上"file://" (File协议主要用于访问本地计算机中的文件),目前只有ie下能正常显示

<img src="file:///d:/upload/xxx.jpg" />

第二种做法:创建一般处理程序(ShowLocalImg.ashx) ,再调用context.Response.WriteFile()

以下部分代码示例:

Upload.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form action="Upload.ashx" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<input type="submit" value="Upload" />
</form>
</body>
</html>

Upload.ashx

public void ProcessRequest(HttpContext context)
  {
context.Response.ContentType = "text/html"; HttpPostedFile file = context.Request.Files["pic"];
     if (file != null)
{
  String filePath = "c:/upload/" + file.FileName;
  file.SaveAs( filePath );
  context.Response.Write(String.Format("<img src='./ShowLocalImage.ashx?path={0}' />",
        context.Server.UrlEncode(filePath)));
}   }

ShowLocalImage.ashx

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "image/jpeg"; String filePath = context.Request["path"]; if (filePath != null)
{
if (File.Exists(filePath))
{
context.Response.WriteFile( filePath );
}
}
}

注意:如果要对图片进行定制(做成缩略图、部分显示等),则可以在ShowLocalImg.ashx中用Graphic。。

<img>标签显示本地路径的图片的.NET解决方案的更多相关文章

  1. 前端 img标签显示 base64格式的 图片

    本文链接:https://blog.csdn.net/kukudehui/article/details/80409522在做项目的时候,我从后端返回了一个base64格式的图片文件,想把它渲染在前端 ...

  2. img标签显示本地文件

    html: <img src="__IMG__/male.png" id="imgfpic1" style="height: 100%; wid ...

  3. img标签使用绝对路径无法显示图片

    说明:  图片的磁盘路径斜杠使用:右斜杠"\",而图片的网络路径使用左斜杠"/",注意加以区分. 如果这张图片属于服务器图片或者网络图片,我们必须在Img标签里 ...

  4. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  5. tomcat中显示本地图片①(未解决)

    <本模块文仅作为学习过程中的自我总结,有需要可参看,欢迎指导与提出建议,很多地方可能断章取义,理解不到位,虚心求学.谢谢!> 资料查阅原因:2018/7/10(做项目中显示详情页面,从数据 ...

  6. 在InternetExplorer.Application中显示本地图片

    忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...

  7. Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)

    ArthurSlog SLog-71 Year·1 Guangzhou·China Sep 12th 2018 ArthurSlog Page GitHub NPM Package Page 掘金主页 ...

  8. Android 使用ContentProvider扫描手机中的图片,仿微信显示本地图片效果

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/1873 ...

  9. Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果

    大家好!过完年回来到现在差不多一个月没写文章了,一是觉得不知道写哪些方面的文章,没有好的题材来写,二是因为自己的一些私事给耽误了,所以过完年的第一篇文章到现在才发表出来,2014年我还是会继续在CSD ...

随机推荐

  1. 7.log4j

    Log4j:日志工厂的一部分(使用起来比较麻烦) 1.要想使用外部类,得先导包 pom.xml <dependency> <groupId>log4j</groupId& ...

  2. 解决mailx发邮件报错:esmtp-server: 504 5.7.4 Unrecognized authentication type [HK2PR02CA0167.apcprd02.prod.outlook.com] "/root/dead.letter" 11/302 . . . message not sent.

    报错信息: esmtp-server: 504 5.7.4 Unrecognized authentication type [HK2PR02CA0167.apcprd02.prod.outlook. ...

  3. AWS ec2的ubuntu14.04上安装git服务

    http://imerc.xyz/2015/11/13/Ubuntu-14-04%E4%B8%8AGit%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%90%AD%E5 ...

  4. hadoop学习笔记(九):mapReduce1.x和2.x

    一.MapReduce1.0的数据分割到数据计算的过程 MapReduce是我们再进行离线大数据处理的时候经常要使用的计算模型,MapReduce的计算过程被封装的很好,我们只用使用Map和Reduc ...

  5. 一起学Netty(一)之HelloWorld,可以聊天的小程序哦

    转自于:http://blog.csdn.net/linuu/article/details/51306480

  6. 生成树计数 lighting 最终决定用这个模板! (有逆元的模板)

    #include <cstdio> #include <cstring> #include <algorithm> #include <cmath> # ...

  7. python中的数学类型及操作

    一.概述 整数类型 浮点数类型 复数类型 round()函数 数值运算符 数值运算函数 字符串类型 1.整数类型 整型:用来描述什么:比如身高,体重,年龄等 eg: age=20 height=168 ...

  8. Linux实现树莓派3B的国密SM9算法交叉编译——(一)环境部署、简单测试与eclipse工程项目测试

    这篇文章主要介绍了交叉编译的实现,包括环境部署,并简单测试交叉编译环境是否安装成功. 一.交叉编译 在一个平台上生成另一个平台上的可执行代码.为什么要大费周折的进行交叉编译呢?一句话:不得已而为之.有 ...

  9. 【转】Chrome——F12 谷歌开发者工具详解

    Chrome——F12 谷歌开发者工具详解 console source network

  10. 修改eclipse工程jdk版本

    在eclipse中项目jdk版本不匹配的时候需要修改项目工程的jdk版本,但是网上的一些版本修改不是很完全,经过一些摸索之后,参考总结了我在项目中的具体配置实践 问题: 修改eclipse中的项目jd ...