【总结】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
//处理返回回来的数据
});
});