jQuery通过HTML5实现异步上传文件实例。判断文件的大小与类型的方法。这个示例是HTML5通过Ajax和jQuery异步上传文件:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress>
<script> $(':file').change(function(){ var file = this.files[0]; name = file.name; size = file.size; type = file.type; //你的验证代码,比较超出上传大小限制啦,文件类型不对啦什么的 }); $(':button').click(function(){ var formData = new FormData($('form')[0]); $.ajax({ url: 'upload.php', //上传的服务器URL,upload.php内容参考下方代码 type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } return myXhr; }, //Ajax 事件 beforeSend: beforeSendHandler, success: completeHandler, error: errorHandler, // Form data data: formData, cache: false, contentType: false, processData: false }); }); function progressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded,max:e.total}); } } function beforeSendHandler(){ // 这里写上传前的一些代码,显示提示语言或滚动条什么的 } function completeHandler(){ // 这里写上上传结束后的一些代码 } function errorHandler(){ // 这里写上错误提示 } </script>