<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. The Zen Programmer (zhuan)

    http://blog.csdn.NET/marksinoberg/article/details/52460725 ***************************************** ...

  2. Oracle 修改一行数据内存主要变化

    向Oracle 数据库发出请求,修改一行数据,在内存中主要有以下变化: 1. 服务器进程将包含该行数据的块读取到内存中 2. 写redo日志.将内存中该数据块指向undo表空间中数据块的变更向量(Ch ...

  3. html5常用API之Full Screen

    所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序.这款API十分简单有用,是html5初学者必 ...

  4. phalcon: (非官方)简单的多模块

    phalcon: [非官方]多模块 配合router使用 例如:我的模块叫做: home 入口文件增加引入: use Phalcon\Mvc\Router; 在自动引入前面增加,自动引入命名空间: / ...

  5. 如何在腾讯云快速构建一个Wordpress个人站点

    版权声明:本文由贺嘉原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/175 来源:腾云阁 https://www.qclou ...

  6. Mybatis学习(叁)

    一.resultMap[结果映射  关系映射] 作用:当查询的数据与数据库中的数据不一致(表中字段和实体的属性不一样),通过resultMap进行一次映射. 可以使用简单的做法:(取别名) 二.多表查 ...

  7. Apache Commons fileUpload实现文件上传之一

      需要两个jar包: commons-fileupload.jar Commons IO的jar包(本文使用commons-io-2.4.jar) 利用Servlet来实现文件上传. package ...

  8. Android 子activity关闭 向父activity传值

    使用startActivity方式启动的Activity和它的父Activity无关,当它关闭时也不会提供任何反馈. 可变通的,你可以启动一个Activity作为子Activity,它与父Activi ...

  9. JS禁止右键

    function cancelMouse(){return false;}document.oncontextmenu = cancelMouse;

  10. java中的if-Switch选择结构

    字随笔走,笔随心走,随笔,随心.纯属个人学习分析总结,如有观者还请不啬领教. 1.if选择结构 什么是if结构:if选择结构是根据判断结果再做处理的一种语法结构. 起语法是: if(判断条件){ 操作 ...