html5使用FileReader上传图片
客户端代码是网上找的,修改为.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();
}
}
html5使用FileReader上传图片的更多相关文章
- 网站开发进阶(三十二)HTML5之FileReader的使用
HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...
- HTML5 之 FileReader 方法上传并读取文件
原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...
- HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- HTML5 通过 FileReader 实现文件上传
概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...
- [转] HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- HTML5 本地裁剪上传图片
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- HTML5之FileReader的使用.RP
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- HTML5 之 FileReader 的使用 (网页上图片拖拽并且预显示可在这里学到) [转载]
转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml FileReader 资料(英文) : https://d ...
- FileReader上传图片
实现拖拽图片,在上传至服务器前,显示图片并操控大小 利用HTML5 dragenter dragover dragleave drop 在实现图片显示方面,用了FileReader这个类 var fi ...
随机推荐
- 解决winrar压缩软件弹出广告
最近winrar每次打开压缩包就会弹出一个广告,那是因为winrar是收费软件,注册了就没有广告了.下面我教大家怎么注册来屏蔽广告. 解决方法 1.新建一个txt文件并命名为"rarreg. ...
- Google搜索质量评估员指南
Google: 此文档是我们(谷歌)的一份搜索质量评估员指南,可作为搜索质量评估员的培训材料.其中主要介绍了一类名为“网址评分”的评分任务,此类任务要求评估员查看搜索查询与可能返回的相应结果.他们需要 ...
- Verilog之SOS信号-仿顺序操作
SOS信号:. . . _ _ _ . . . 1. module sos_module ( CLK, RSTn, Pin_Out, SOS_En_Sig ); input CLK; input RS ...
- Cocos与Cocos2d-x协作教程——多分辨率适配
http://www.cocoachina.com/bbs/read.php?tid-288123.html Cocos v2.1开始新增了一种新的多分辨率适配方案:流式布局. 这种布局相比Cocos ...
- PHP生成迅雷、快车、旋风等软件的下载链接代码实例
PHP生成迅雷.快车.旋风等软件的下载链接代码实例 <?php function Download() { $urlodd=explode('//',$_POST["url" ...
- International Conference in 2015
Call for Paper International Conference on Computer Vision(ICCV2015, Santiago, Chile). (deadline: Ap ...
- 配置本地IIS和VS自带IIS
以前调试网站一直用的vs自带的IIS,做为学习没啥大碍,但要是用于团队项目开发就会带来诸多不便.团队开发项目有统一的网站端口号.文件目录什么的,端口号可以在配置文件中修改倒也没啥,但是要在自己的项目中 ...
- SQL语句 in和inner join各有什么优点
比如A1表 100W行 A2表50W行select a.* from A1 a where a.column1 in (select b.column1 from A2 b where b.colum ...
- mssql的日期函数,如何取得当前年月日,当前时间,当前月份,当前天数,一年中第几天?
mssql函数DATENAME 语法 DATENAME ( datepart , date ) 参数 datepart 是返回的 date 的一部分.下表列出了所有有效的 datepart 参数.用户 ...
- Linux下oracle11gR2系统安装到数据库建立配置及最后oracle的dmp文件导入一站式操作记录
简介 之前也在linux下安装过oralce,可每次都是迷迷糊糊的,因为大脑一片空白,网上随便看见一个文档就直接复制,最后搞了乱七八糟,虽然装上了,却乱得很,现在记录下来,希望能给其他网上朋友遇到问题 ...