<input name="txtName" type="file" id="pic" onchange="loadImage(this)"/>

JavaScript代码:

function loadImage(img) {
var filePath = img.value;
var fileExt = filePath.substring(filePath.lastIndexOf("."))
.toLowerCase(); if (!checkFileExt(fileExt)) {
alert("您上传的文件不是图片,请重新上传!");
img.value = "";
return;
}
if (img.files && img.files[0]) {
// alert(img);
// alert(img.files[0])
alert('你选择的文件大小' + (img.files[0].size / 1024).toFixed(0) + "kb");
// var xx = img.files[0];
// for (var i in xx) {
// alert(xx[i])
// }
} else {
img.select();
var url = document.selection.createRange().text;
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
} catch (e) {
alert('如果你用的是ie8以下 请将安全级别调低!');
}
alert("文件大小为:" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb");
}
}
function checkFileExt(ext) {
if (!ext.match(/.jpg|.gif|.png|.bmp/i)) {
return false;
}
return true;
}

JavaScript input type=file 获取文件大小及类型限制的更多相关文章

  1. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  2. input type="file"获取文件名方法

    文件上传比较丑,样式调整时会有一个获取文件名,或者包含文件路径的文件名的方法 html代码 <div class="file-box"> <form id=&qu ...

  3. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

  4. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  5. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  6. js 获取、清空 input type="file"的值 .(转)

    上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...

  7. input type=file accept中可以限制的文件类型

    在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...

  8. 将input type="file" 类型的图片文件转成base64

    带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签 ...

  9. 获取input type=file 的文件内容(纯文本)

    一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...

随机推荐

  1. 多点触控插件Hammer.js

    插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. 使用方法: <script src=<span class ...

  2. linux下ACE使用epoll

    select和epoll的比较就不用多说了.ACE在linux下默认使用select来实现Reactor的.如何在linux下让ACE使用epoll. 1.加一个编译宏,告诉ACE不要使用默认的sel ...

  3. mysql5.7 二进制包安装

    1. 下载包 wget   http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.12-linux-glibc2.5-x86_64.tar.gz 2. 解 ...

  4. U盘变小恢复工具——亲测完美可用

    大白菜U盘,装系统后,U盘损坏,格盘后8G只剩345M,用usbboot恢复到了2G容量.离8G还差很远.用U盘变小恢复工具后,完美恢复到原来大小.在此记录一下,以待下次遇到相似情况使用. 原文地址 ...

  5. 初始seajs

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制 SeaJS本身遵循KISS(Keep It Simple, Stupid ...

  6. 使用runtime 实现weex 跳转原生页面

    一.简述 最近项目组打算引入weex,并选定了一个页面进行试水.页面很简单,主要是获取数据渲染页面,并可以跳转到指定的页面.跟之前使用RN 相比,weex 确实要简单很多.从下图中我们可以看到,wee ...

  7. tp其他功能

    数据缓存 在ThinkPHP中进行缓存操作,一般情况下并不需要直接操作缓存类,因为系统内置对缓存操作进行了封装,3.1版本推荐的数据缓存方法是cache方法,基本的用法是:(3.1.2版本cache方 ...

  8. 安装eclipse

    前提,安装好jdk并成功配置好环境变量 下载eclipse-standard-kepler-R-win32-x86_64,直接打开里面的eclipse.exe文件即可

  9. 如何测试一个U盘

    功能测试: 1 在windows xp比较流行的操作系统上是否可以识别(装了驱动后是否可以) 2 在电脑上显示的盘符是否正确 3 总空间,可用空间,已用空间是否显示正确 4 u盘中是否可以拷入各种格式 ...

  10. Inno Setup技巧[界面]自定义安装向导小图片宽度

    原文  blog.sina.com.cn/s/blog_5e3cc2f30100cj7e.html 英文版中安装向导右上角小图片的大小为55×55,汉化版中为55×51.如果图片超过规定的宽度将会被压 ...