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 ...
随机推荐
- 用T-sql 实现Oracle Connect by 的功能
; with subDepartment as ( select BesonDepartmentID, DepartmentName, ParentBesonDepartmentID, 1 as Hi ...
- 剑指offer题目1-10
面试题3:二维数组中的查找 public class Solution { public boolean Find(int [][] array,int target) { boolean isFou ...
- 【转】C++11常用特性的使用经验总结
出处 http://www.cnblogs.com/feng-sc C++11已经出来很久了,网上也早有很多优秀的C++11新特性的总结文章,在编写本博客之前,博主在工作和学习中学到的关于C++11方 ...
- Apache配置多域名 AH00548: NameVirtualHost has no effect and will be removed in the next release
httpd-vhosts.conf 中首行 NameVirtualHost *:80 删除掉即可解决.
- SharePoint部署
一.数据库权限 二.wps部署 在项目-属性-生成事件中 命令:xcopy "$(TargetDir)*.dll" "$(SolutionDir)\Deploy\Sha ...
- Java 第五章 循环结构1
循环结构 1 while 循环结构 ,do- while 循环结构 . 循环结构: 必须满足两个条件 . 1,循环条件 和 循环 操作 ! while 循环 特点:先判断,再执行 , 编码规范:缩进, ...
- php安装gearman扩展实现异步分步式任务
参考: 1.小喵爱你的博客 2.PHP Manual 依赖 1.gcc44 2.boost >=1.39 3.libevent 4.php5.3+ 5.update ld.so.conf 安装依 ...
- Android Studio安装genymotion模拟器
1.Genymotion的安装: Genymotion无疑是目前最快最好用的模拟器.官网下载地址:https://www.genymotion.com/ 先注册,然后下载,安装VirtualBox最简 ...
- Young氏矩阵
一个 m x n 的Young氏矩阵是指,每一行数据都是从左到右排好序,每一列的数据也都是从上到下排好序.其中也可能存在一些INF的数据,表示不存在的元素,一个mxn的Young氏矩阵最多用来存放 r ...
- mfc/格式转换
1.int型转为字符串型 int s = 123; CString str; str.Format("%d",s);