这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇多个上传文件用 js 验证文件的格式和大小的方法 (推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html 部分:
- <dsp:form action="${originatingRequest.requestURI}" method="post" enctype="multipart/form-data">
- <dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile1" id="uploadedFile1"
- value="" onchange="checkfile('uploadedFile1');" />
- <dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile2" id="uploadedFile2"
- value="" onchange="checkfile('uploadedFile2');" />
- <a class="btn_sprite btn_font14_red" href="javascript:;" rel="external nofollow">
- <span>
- 提交申请
- </span>
- </a>
- <dsp:input type="submit" style="display:none;" bean="ReturngoodsFormHandler.submitReturngoods"
- id="submitReturngoods" value="Add" />
- </dsp:form>
需要注意:上传文件要有一个 id, 然后 onchage 事件里加一个 id 的名称;
js 部分:
- //将验证的设置和错误信息抽离出来,有利于最后submit时候做判断
- var flag=true;
- var errorinfo="";
- //验证文件的格式
- function checkfile(filenames){
- filename=document.getElementByIdx_x_x(filenames).value;
- var re=/(.[.]bmp)$|(.[.]gif)$|(.[.]jpg)$|(.[.]png)$|(.[.]jpeg)$/i;
- if (!re.test(filename)) {
- errorinfo = "只支持bmp,gif,jpg,png,jpeg格式文件,请重新上传";
- alert(errorinfo);
- flag = false;
- return false;
- }
- //验证文件的大小
- if(document.getElementByIdx_x_x(filenames).size>8000){
- errorinfo = "文件必须小于800KB,图片太大 size:"+document.getElementByIdx_x_x_x_x_x(filenames).size;
- alert(errorinfo);
- return false;
- }
- }
- jQuery('.btn_font14_red').click(function(){
- if(flag==true){
- $("#submitReturngoods").click();
- }else{
- alert(errorinfo);
- return false;
- }
- });
注意:这么做的好处是:第一:上传文件的时候,如果有错误,第一时间通知用户,用户去修改;
第二:如果用户最后填完了,虽然之前有提示语句,但是用户忘了是什么,点击提交的时候,仍然可以提示用户问题的原因。同时将错误信息和设置值放在最外面,而不用再次验证,可以节省页面效率。
(document.getElementByIdx_x_x(filenames) 不知道为啥发表的时候,总是多个_x,去又去不掉,大家在 copy 的时候记得去掉哈)
以上这篇多个上传文件用 js 验证文件的格式和大小的方法 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0531/326875.html