使用 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 后缀的图片
.(请务必上传真实证件照片或图片 否则不会通过认证)
.