【总结】02项目总结---html5常用开发总结

发表于2014-10-21 18:45  |  次阅读  |  0条评论  |   作者:siru90

1. 异步上传文件 (html5 + jquery)
html:
<form id="addWuliaoForm" action="/putin/games/addAdvertPic?token=<?php echo CommUtils::getToken();?>" method="post" enctype="multipart/form-data">
<input type="file" name="uploadPic" id="uploadPic" />
<b class="btn green_button green_button_wuliao">保存</b>
</form>

JS处理:

js处理:
$("#uploadPic").change(function(){ 
	//获取文件的类型 大小和名称
	var file = this.files[0];
	var name = file.name;
	var size = file.size;
	var type = file.type; 
	if ((type != "image/png")) 
	   .....
	else   
	{
		//成功后用html5预览图片
		var reader = new FileReader();
		reader.onload = function(e) {
			//获取图片的宽和高
			var img = new Image();
			img.src = e.target.result;
			img.width  
			img.height  

			var node = '<img src="'+ e.target.result +'" />';
			... 
			$("#xin_img").html(node);
		};  
        reader.readAsDataURL(file);
    }
});

$("#addWuliaoForm b").unbind("click").click(function(){
	$("#addWuliaoForm").ajaxSubmit(function(response){  //需要添加jquery.form.js
		//处理返回回来的数据
	});
});

本站关键字:sunny90 web开发 数据库 移动开发 服务器 Nginx Mysql PHP
Copyright © sunny90版权所有 power by sunny90.com  
湘ICP备14012284号-1,粤公网安备 44030602000307号