<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<img class="card-cover" src="../../../app/icons/daily/project-add.png" alt="">
<div class="actions-modal-group">
<span class="actions-modal-button color-bd">拍照<form name="form" id="form"><input name="file" class="file" type="file" accept="image/*" capture="camera"/></form></span>
<span class="actions-modal-button color-bd">相册<input type="file" accept="image/*" class="file"></span>
<span class="actions-modal-button color-yi">取消</span>
</div>
<script>
/*获取file的url*/
$(".file").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
$(".card-cover").attr("src", objUrl) ;
}
}) ;
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
</body>
</html>