使用 JavaScript File API 实现文件上传
- robin - IBM developerWorks 中国 : 文档库File API 是 Mozilla 向 W3C 提出的一个草案,旨在用标准 JavaScript API 实现本地文件的读取. File API 将极大地方便 Web 端的文件上传等操作,并有望成为未来的 HTML 5 规范的一部分. 本文将介绍 File API 的概况,并用两个实例展示 File API 的应用.
JavaScript对上传的文件进行大小和格式的校验
1.页面代码:
<form id="uploadFileform" action="$!{request.contextPath}/user/uploadImage" method="post"
enctype="multipart/form-data" >
<center>
<label id="Header" cssClass="HeaderText" value="图片上传" />
<hr style="size: 1" />
<p id="FileList">
<input id="uploadImage" value="" type="file" name="uploadImage" size="50" />
</p>
<hr style="size: 1" />
<p>温馨提示:只允许上传.jpg .gif .png 后缀的图片</p>
<p style="color:green;">(请务必上传真实证件照片或图片 否则不会通过认证)</p>
<p>
<input class="btn btn-primary" type="button" value="上传图片" onclick="uploadImages();"/>
</p>
<hr style="size: 1" />
</center>
<p align="center">
<span class="GbText" style="width: 100%; color: red;"></span>
</p>
</form>
2.Js代码:
function uploadImages() {
var str = $("#uploadImage").val();
if(str.length!=0){
var reg = ".*\\.(jpg|png|gif|JPG|PNG|GIF)";
var r = str.match(reg);
if(r == null){
alert("对不起,您的图片格式不正确,请重新上传");
}
else {
if(window.ActiveXObject) {
var image=new Image();
image.dynsrc=str;
if(image.fileSize>5243000){
alert("上传的图片大小不能超过5M,请重新上传");
return false;
}
}
else{
var size = document.getElementById("uploadImage").files[0].size;
if(size>5243000) {
alert("上传的图片大小不能超过5M,请重新上传");
return false;
}
}
$('#uploadFileform').submit();
}
}
else {
alert("请先上传图片");
}
}
温馨提示:只允许上传.jpg .gif .png 后缀的图片
.(请务必上传真实证件照片或图片 否则不会通过认证)
.