html5上传图片_html 上传图片检查图片最后修改时间-优快云博客

本文链接：https://blog.youkuaiyun.com/u011691759/article/details/17739409

本文介绍了一种使用HTML5 File API实现的图片即时上传和预览的方法。通过JavaScript获取文件的详细信息，如最后修改时间、文件名、大小及类型，并在页面上实时显示这些信息。同时，该方法还利用File API将图片即时展示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这我只演示了得到图片的信息。并且可以即时预览上传的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function up(){
	var pic=document.getElementsByTagName('input')[0].files[0];
	var fd=new FormData();
	fd.append('pic',pic);
	var str='';
	str+='文件上次修改时间'+pic.lastModifiedDate+'<br/>';
	str+='文件名字'+pic.name+'<br/>';
	str+='文件大小'+pic.size+'<br/>';
	str+='文件 类型'+pic.type+'<br/>';
	$('#res').html(str);
	//fileapi 参考文档 url :http://www.w3.org/TR/FileAPI/
	//xhr 参考文档url http://www.w3.org/TR/XMLHttpRequest/
	var blob= window.URL.createObjectURL(pic);
	var im=document.createElement('img');
	im.setAttribute('src',blob);
	document.getElementsByTagName('body')[0].appendChild(im);
}
</script>
</head>
<body>
	<h1>模拟ifrmae文件上传</h1>
	<h2></h2>
	<form action="upload.php" method="post" enctype="multipart/form-data" οnsubmit="return up();">
	<input type="file" name="pic" οnchange="up();"/>
	<div id="res"></div>
	</form>
</body>
</html>