input file 文件上传,js控制上传文件的大小和格式
文件上传一般是用jquery的uploadify,比较好用。后面会出文章介绍uploadify这个插件。
但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制。
下面我用javascript来控制文件上传的大小和类型。
贴出html代码:
<form action="后端接口" enctype="multipart/form-data" method="post" id="attachment_uploads">
<div class="attachs fl">
<div class="t_fjfont">附件:</div>
<div class="upload_btns"><input type="file" name="file" id="file" onchange="fileChange(this);" /> </div>
</div>
<div class="attachs fl">
<div class="t_fjfont" style="color:red;font-size:12px;font-weight:bold">文件上限2MB</d
</div>
<div class="attachs fl">
<div class="upload_btns"><input type="file" name="files" id="file_fujian" onchange="filefujianChange(this);" /> <input type="hidden" name="rev" class="hide_rev" /></div>
</div>
</form>
javascript代码:
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="xls" && fileName !="xlsx"){
alert("请选择execl格式文件上传!");
target.value="";
return
}
}
function filefujianChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
target.value="";
return
}
}
上面代码当时为了考虑兼容问题,没有写html5的文件上传控制,直接在js中控制了。本代码支持所有主流浏览器!兼容性还是可以的!欢迎交流!
input file 文件上传,js控制上传文件的大小和格式的更多相关文章
- 一段JS控制TD中图片的大小的代码
一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...
- JS控制上传文件个数
<html><body> <h3>js控制文件上传数量</h3> <form action="" enctype= ...
- HTML5 input file控件使用accept过滤限制的文件类型以及在谷歌下打开很慢的问题
在文件上传控件(input type='file')中,可以通过accept属性实现对文件类型的过滤. 一.相关代码: 下面给出对应的文件上传控件代码: <input type="fi ...
- [置顶] js 控制文章中字体的大小,mootools实现
文中字体要12.14.16号中选择: <span class="zh">字号:<b class="change-font">12< ...
- 移动端头像上传AJax input file
jQuery中的Ajax不能支持 input file 需要用ajaxupload.js但是先需要引入jQuery文件 <script src="__PUBLIC__/js/ajaxf ...
- thinkphp5开发的网站出现”No input file specified”(php版本5.6.27)
thinkphp5开发的网站出现”No input file specified”(php版本5.6.27) 一.总结 一句话总结:搜索引擎一定要用google,比百度节约时间一万倍,google啊, ...
- legend3---用Homestead配置后报错“No input file specified.”
legend3---用Homestead配置后报错“No input file specified.” 一.总结 一句话总结: 自己项目上传到github的时候多增加了一层legend3的github ...
- APACHE支持.htaccess以及 No input file specified解决方案
在你的Apache安装文件夹conf里找到httpd.conf文件 搜索LoadModule rewrite_module modules/mod_rewrite.so 如果前面有注释符号#,请去掉. ...
- phpstudy APACHE支持.htaccess以及 No input file specified解决方案
APACHE支持.htaccess以及 No input file specified解决方案 你的Apache安装文件夹conf里找到httpd.conf文件 索LoadModule rewrite ...
随机推荐
- vi/sed等遵循的搜索正则语法
转自:http://blog.csdn.net/lanxinju/article/details/5731843 一.查找 查找命令 /pattern<Enter> :向下查找patter ...
- .NET环境下,通过LINQ操作SQLite数据库
//对应数据库中的某个表 [Table(Name = "main.Student")] public class Student { [Column(Na ...
- [计算机网络-传输层] 面向连接的传输:TCP
参考:http://blog.csdn.net/macdroid/article/details/49070185 在学习TCP之前我们先来看一下可靠数据传输需要提供什么样的机制: ·差错检测机制:检 ...
- hdu2295-Radar
有n个城市,\(m\)个雷达,\(k\)个操作员,每个操作员只能操作一个雷达.每个雷达的覆盖范围是一个以雷达坐标为中心的圆,所有雷达的覆盖半径是相同的. 现在给出这\(n\)个城市,\(m\)个雷达的 ...
- hihoCoder#1698 : 假期计划 组合数
题面:hihoCoder#1698 : 假期计划 组合数 题解: 题目要求是有序的排列,因此我们可以在一开始就乘上A!*B!然后在把这个序列划分成很多段. 这样的话由于乘了阶乘,所以所有排列我们都已 ...
- spring任务执行器与任务调度器(TaskExecutor And TaskScheduler)
对于多线程及周期性调度相关的操作,spring框架提供了TaskExecutor和TaskScheduler接口为异步执行和任务调度.并提供了相关实现类给开发者使用.(只记录采用注解的使用形式,对于X ...
- iOS图片上传后被旋转的问题
最近用PHP做了一个图片合成程序,前端是通过HTML的file input选取自定图片,POST到php后台调整尺寸后与事先准备好的背景图进行合成. 通过测试发现,上传后的自定图片有的被旋转了,有的是 ...
- Vue项目搭建过程
环境搭建:mac+nodejs+npm #安装node.js : $ brew install node #安装vue-cil: $ npm install -g vue-cli 注:官网下载安装no ...
- Linux试题
1.编写脚本,统计/etc./usr./var目录中有多少个一级子目录和文件 #!/bin/bash # danran # time is Mon Jun 5 13:09:12 CST 2017 li ...
- stout代码分析之五:UUID类
UUID全称通用唯一识别码,被广泛应用于分布式系统中,让所有的元素具有唯一的标识. stout中UUID类继承自boost::uuids::uuid.api如下: random, 产生一个UUID对象 ...