因为有这个需求（移动端），所以就研究了一下，发现还挺不错的。
这个主要是用了html5的API，不需要其他的JS插件，不过只有支持html5的浏览器才行，就现在而言应该大部份都支持的。
<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<head>

<title></title>

</head>

<body>

<img id="expImg"/>

<img id="img" style="display:none"/>

<div><input type="file" id="file"></div>

<div id="btn" style="font-size:48px; line-height:60px">确定</div>

</body>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

	web.main();

});

var web={

	main : function(){

		web.init();

		web.getImgUrl();

	},

	init : function(){

		this.file_Id=$("#file");

		this.img_Id=$("#img");

		this.expImg_Id=$("#expImg");

		this.btn_Id=$("#btn");

		this.c=document.createElement("canvas");

		this.ctx=this.c.getContext("2d");

	},

	getImgUrl : function(){

		var fileUrl="",imgDataUrl="",reader=new FileReader(),imgW=0,imgH=0,expW=0,expH=0,imgMax=800;

		web.btn_Id.click(function(){

			imgW=0;

			imgH=0;

			expW=0;

			expH=0;

			web.img_Id[0].src="";

			//转换图片为base64格式

			fileUrl=web.file_Id[0].files[0];

			reader.readAsDataURL(fileUrl);

			reader.onload=function(e){

				web.img_Id[0].src=this.result;

				imgW=web.img_Id.width();

				imgH=web.img_Id.height();

				//改变图片尺寸，这个根据自己的实际需求来写算法

				if(imgW>imgMax&&imgW>=imgH){

					expW=imgMax;

					expH=parseInt((imgMax*imgH)/imgW);

				}else if(imgH>imgMax&&imgH>imgW){

					expH=imgMax;

					expW=parseInt((imgMax*imgW)/imgH);

				}else{

					expW=imgW;

					expH=imgH;

				}

				web.c.width=expW;

				web.c.height=expH;

				web.ctx.drawImage(web.img_Id[0],0,0,expW,expH);

				imgDataUrl=web.c.toDataURL(); //默认输出PNG格式

				//imgDataUrl=web.c.toDataURL("image/jpeg",0.8); //设置输出jpg格式，第二个参数为图片质量

				web.expImg_Id[0].src=imgDataUrl;

			}

		})

	}

}

</script>

</html>

　　

html5 图片转为base64格式异步上传的更多相关文章

  1. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  2. 图片base64格式转为file文件类型上传方法

    日常使用文件上传方式,都是通过input type='file'的文件选择框进行文件上传.但是会通过其他交互方式等到图片的base64格式进行上传.具体情况如下示意: 在项目开发中,需要进行照片采集, ...

  3. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  4. PHP将图片转base64格式函数

    base64的好处是什么?今天在跟小伙伴讨论这个问题,要是全站用Php把图片转为base64行不行? 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终 ...

  5. 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  6. 使用html5 FileReader获取图片，并异步上传到server(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

  7. 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)

    为什么80%的码农都做不了架构师?>>>   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...

  8. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  9. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

随机推荐

  1. NOIp DP 1003 爆零记

    6道DP题只拿了220分,NOIp我不滚粗谁滚粗? 考试历程貌似并没有什么可说的QAQ,就是不停的来回推方程和写崩的状态中. 正经题解 六道题其实除了第六道比较恶心..其他的都还算可以. truck ...

  2. Django_collections01

    python manage.py flush python manage.py changepassword username python manage.py createsuperuser pyt ...

  3. jQuery基础(2)-- jQuery 选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作.jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 ...

  4. Nginx与服务器集群在它的配置文件中的配置

  5. Navicat 的使用（二）

    一,navicat如何写sql语句查询? 方法1:ctrl+q就会弹出一个sql输入窗口,就可以在里面写sql了.写完sql后,直接ctrl+r就执行sql了. 还有一点,写sql语句时,navica ...

  6. MFC学习-第2,3课 MFC框架的运行机制

    转自:http://blog.163.com/zhigang0633@126/blog/static/38790491200822711526168/ 讲述MFC AppWizard的原理与MFC程序 ...

  7. Linux学习笔记（一）2015.4.13

    研究生由单片机转Linux学习 首先安装VMware虚拟机,用的是VMware 10.0 在VMware 10.0上安装视频上推荐的Red Hat Linux 5 安装后正式进入Linux学习 笔记1 ...

  8. URL组分

    url通常包含多个组成部分,在js中可通过location对象获取其中各项信息 访问http://mp.weixin.qq.com/s?__biz=MjM5NjA0NjgyMA==&mid=2 ...

  9. apk支持html video控制 ，是播放状态就暂停，暂停状态就播放

    apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...

  10. FPS

    游戏的FPS跟什么有关 http://zhidao.baidu.com/link?url=jZJoN_-MTC9fWCBSBaL5vezBp13MRSv8PdCcQMbwX5tiFGzxNEHe7UB ...