<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. windows下搭建及配置mantis缺陷管理工具

    在windows XP 操作系统下,如何更快.更容易地搭建及配置mantis缺陷管理工具呢?以下是我实践的具体步骤: 一.安装mantis的前提环境,需要先安装Apache HTTP Server2. ...

  2. java-随学随记之基础篇

    一.Java是一门高级语言,具有跨平台性(一次编译到处运行) 1.javac.exe命令,编译器   javac 源文件名.java 2.java.exe命令,启动虚拟机 java 类名 二.环境变量 ...

  3. IOS--工作总结--post上传文件(以流的方式上传)

    1.添加协议 <NSURLConnectionDelegate> 2.创建 @property (nonatomic,retain) NSURLConnection* aSynConnec ...

  4. 003 assert简述

  5. BestCoder 2nd Anniversary 1002 Arrange

    排除所有不符合条件后根据当前位置上下界计算, 由于前面取的数肯定在之后的区间内,所以去掉已取的个数即可. #include <iostream> #include <cstdio&g ...

  6. C++中vector和list排序

    容器.泛型算法.和类是不是就是C++相对于C"++"的那部分呢?暂时先这么认为吧.如果这篇博客有幸被别人看到,请帮忙指出.--C++ 菜鸟 留. vector的迭代器是随机访问迭代 ...

  7. CDZSC_2015寒假新人(1)——基础 d

    Description These days, I am thinking about a question, how can I get a problem as easy as A+B? It i ...

  8. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  9. [汇编语言]-第七章 用[bx+idata]的方式进行数组的处理

    1- 转化为大写 方法一: assume cs:code,ds:data data segment db 'BaSiC' db 'MinIX' data ends code segment start ...

  10. The port Command

    The port Command help: port help selfupdate selfupdate: sudo port selfupdate search: port search tft ...