因为有这个需求（移动端），所以就研究了一下，发现还挺不错的。
这个主要是用了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. 关键字static(1)

    static表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念.被static修 ...

  2. spring-data-jpa Repository的基本知识

    1.项目中的Repository对象的使用 2.Repository 引入的两种方式 继承和使用注解 3.Repository接口的定义 Repository 接口是 spring Data 的一个核 ...

  3. C# Get/Post 模拟提交

    public static string GetPage(string url, string encoding) { PublicVariables.NetworkConnection = fals ...

  4. Python2.7安装（win7）

    Python可在官方网站直接下,或者百度一下Python2.7下载,这里推荐使用2.7而不是3.3,比较适合初学者 工具/原料 win7系统 python2.7安装包 方法/步骤 1.从官网下载最新的 ...

  5. Tomcat 用户访问控制

    要设置Tomcat下的Host都有哪些ip能访问,可以在conf/server.xml的相应Host元素内加Value标签,示例: <Valve className="org.apac ...

  6. 第六章 jQuery和ajax应用

    ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...

  7. web页面的加载顺序

    1.页面顺序 一个典型的web页面由于三个部分组成:html.css和JS.执行的顺序是: 在构造完HTML的dom结构时.触发DOMContentLoaded事件. 整个执行过程安装html的顺序来 ...

  8. js数组操作【转载】

    用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵 ...

  9. rpm 命令

    这些事rpm的常用参数!!! 你可以在linux下man 一下rpm就知道了!!! 不过是英文的,不然你可以百度一下rpm就知道了额!!! 下面我帮你贴几个!!!!rpm 常用命令1.安装一个包 # ...

  10. Java多线程编程核心技术--定时器

    Timer类主要负责计划任务,也就是在指定的时间开始执行某一个任务. 方法schedule(TimerTask task, Date time) public class Task { private ...