<input id="File1" type="file" onchange="checkFile(this)" />

方式一)

function checkFile(o) {
var fileobj = o.files[0];
if ( typeof(fileobj) == "undefined"){
alert("请选择要上传的文件。");
return false;
}
else {
var fileType = fileobj.type;
var fileName = fileobj.name;
var fileSize = fileobj.size / 1024 / 1024;
var maxSize = 2048;

         var allowType = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
         if (!allowType.test(fileType)) {
            alert("文件格式必须为jpeg或png");
            return false;
         }
if (fileobj.name.indexOf("'") > -1) {
alert("名称不能包含以下字符:\\ / : * ? \' \" < > |");
return false;
}
else if (fileSize > maxSize) {
alert("请选择" + maxSize + "MB以内的文件上传。您当前文件大小为:" + fileSize.toFixed(2) + "MB");
return false;
}
else {
$("#xxx").html("<img src='/img/Processing.gif' />");//显示loading图片
return true;
}
}
}

方式二)

JS:

function checkFile(fileObj)
{
var max = 4;
var fso = new ActiveXObject("Scripting.FileSystemObject");
if(fso.GetFile(fileObj.value).size> max*1024*1024)
{
alert("附件不能超过" + max + "MB,请重新上传");
fileObj.outerHTML = fileObj.outerHTML;
fileObj.value = "";
}
var type = ".doc.wps.pdf";
if(type.indexOf(fileObj.value.substr(fileObj.value.lastIndexOf(".")).toLowerCase())==-1)
{
alert("文件格式必须为:" + type);
fileObj.outerHTML = fileObj.outerHTML;
fileObj.value = "";
}
}

如果使用JQuery,请将

fileObj.outerHTML = fileObj.outerHTML;
fileObj.value = "";

如果onchange在JS内加载,需要重新赋新的事件,修改为:

var newObj = fileObj.clone();
newObj.change(function () { checkFile($("#"+newObj.attr("id"))) });
newObj.val("");
fileObj.after(newObj);
fileObj.remove();

如果onchange在HTML标签内写明,则修改为:

fileObj.after(fileObj.clone().val(""));
fileObj.remove();

兼容各种浏览器哦~

JS获取上传文件的名称、格式、大小的更多相关文章

  1. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  2. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  3. js获取上传文件内容

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  4. JS获取上传文件的绝对路径,兼容IE和FF

    <input type="file" id="fileBrowser" name="fileBrowser" size="5 ...

  5. js 获取上传文件的字节数及内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS 获取上传文件的内容

    <div> 上传文件 : <input type="file" name = "file" id = "fileId" / ...

  7. js判断上传文件的类型和大小

    //检测文件大小和类型 function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value ...

  8. js限制上传文件的类型和大小

    var maxsize = 6*1024*1024;//6M var errMsg = "上传的附件文件不能超过6M!!!"; var tipMsg = "您的浏览器暂不 ...

  9. js获取上传文件的绝对路径

    在html中    <input type="file" id="importFile" />    <input type="bu ...

随机推荐

  1. HTML CSS 常用英语单词

    head 头部              body  身体            title 标题            table表格            list 列表            i ...

  2. sql cast()和convert()

    19.CAST()函数和CONVERT()函数 CAST()函数可以将某种数据类型的表达式转化为另一种数据类型 CONVERT()函数也可以将制定的数据类型转换为另一种数据类型 19.1 CAST() ...

  3. 测序深度和覆盖度(Sequencing depth and coverage)

    总是跑数据,却对数据一无所知,这说不过去吧. 看几篇文章吧 Sequencing depth and coverage: key considerations in genomic analyses( ...

  4. Mongos与集群均衡

    版权声明:本文由孔德雨原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/190 来源:腾云阁 https://www.qclo ...

  5. 初接触eclipse和前后端调试问题 待续

    1.eclipse得连上服务器(tomcat).有JDK,才能跑起来.跑起来之后在本地localhost的行为eclipse的控制台上就可以看到,同样eclipse上对代码有所改动,浏览器上的loca ...

  6. stream流批量读取并合并文件

    import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.F ...

  7. [saiku] 配置saiku实时展现查询数据

    缘起: 在默认的情况下,saiku是不能对数据进行实时展现的,只能通过刷新按钮或者重启服务器来刷新数据 这样以来会有很多的麻烦,每天得手动去刷新,这个操作只有管理员可以操作,在刷新以前客户看到的都是缓 ...

  8. !important css样式

    重要性 我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决. 如下代码: p{color:red!important;} p{co ...

  9. js匿名函數

    (function($){})(jquery) == (function($){})(jQuery) 实际上是匿名函数 用于存放开发插件的代码 作用(非常有用): 这种写法的最大好处是形成闭包.在(f ...

  10. Shell基础:Linux权限管理

    Linux权限基本概念 查看系统(文件夹/文件)权限: ls -l =>d/-   xxx xxx xxx.  num  owner  group  size   date  filename ...