客户端代码是网上找的，修改为.net代码。
<html>
<head>
<meta charset="utf-8">
<title>使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</title>
<style type="text/css">
body
{
margin: 0px;
background: #f2f2f0;
}
p
{
margin: 0px;
}
.title
{
color: #FFFF00;
background: #000000;
text-align: center;
font-size: 24px;
line-height: 50px;
font-weight: bold;
}
.file
{
position: absolute;
width: 100%;
font-size: 90px;
display: none;
}
.filebtn
{
display: block;
position: relative;
height: 110px;
color: #FFFFFF;
background: #06980e;
font-size: 48px;
line-height: 110px;
text-align: center;
cursor: pointer;
border: 3px solid #cccccc;
}
.filebtn:hover
{
background: #04bc0d;
}
.showimg
{
margin: 10px auto 10px auto;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 选择图片
document.getElementById('img').onchange = function () {
var input = document.getElementById("img");
var img = input.files[0];
// 判断是否图片
if (!img) {
return;
}
// 判断图片格式
if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
alert('图片只能是jpg,gif,png');
return;
}
var reader = new FileReader();
reader.readAsDataURL(img);
reader.onload = function (e) { // reader onload start
// ajax 上传图片
$.post("Handler.ashx", { imgname: img.name, img: e.target.result }, function (ret) {
var www = ret;
if (ret != '') {
alert('upload success');
$('#showimg').html('<img src="' + ret + '">');
} else {
alert('upload fail');
}
}, 'text'); //这里返回的类型有：json,html,xml,text
} // reader onload end
}
}
</script>
</head>
<body>
<p class="title">
使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</p>
<p>
<input type="file" class="file" id="img"><%--加入multiple可多选--%><label class="filebtn"
for="img" title="JPG,GIF,PNG">请选择图片</label></p>
<p class="showimg" id="showimg">
</p>
</body>
</html>
服务端代码：
public void ProcessRequest(HttpContext context)
{
if (context.Request["img"] != null)//生成校验码
{
string imgname = context.Request["imgname"];
string imgExtention = System.IO.Path.GetExtension(imgname).ToLower();
if (imgExtention != ".jpg" && imgExtention != ".jpe" && imgExtention != ".jpeg" && imgExtention != ".gif" && imgExtention != ".png" && imgExtention != ".bmp")
{
string s = "原图片文件格式不正确,支持的格式有[ .jpg|.jpe|.jpeg|.png|.bmp|.gif ]！";
}
string imgData = context.Request["img"];
string[] ss =imgData.Split(',');
byte[] imageBytes = Convert.FromBase64String(ss[1]);
//读入MemoryStream对象
System.IO.MemoryStream memoryStream = new System.IO.MemoryStream(imageBytes, 0, imageBytes.Length);
memoryStream.Write(imageBytes, 0, imageBytes.Length);
//转成图片
System.Drawing.Image image = System.Drawing.Image.FromStream(memoryStream);
image.Save("硬盘存储地址" + imgname);
context.Response.Write("Web服务器地址" + imgname);
context.Response.End();
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
2015-09-13 阿尼玛
2012-09-13 文件是否真的写入了磁盘？
2010-09-13 如何取消IE“已限制此网页运行可以访问计算机的脚本或ActiveX控件”(小技巧)