在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱。

由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度。因为微信企业号本身想实现的功能也很纯粹,不需要太多乱七八糟的东西。

我这里只用了JQuery.

总结如下:

1.用户选择文件后,一般只显示一个fakepath,不会显示一个完整的文件目录。用$("input[type='file']")[0].files[0].name即可显示出文件名。

2.$("input[type='file']")[0].files[0].type 显示出文件类型,如"application/vnd.ms-excel",但并不是文件后缀名。

3.$("input[type='file']")[0].files[0].size 显示出文件字节数,实际使用中要进行换算。

javascript input type=file 文件上传的更多相关文章

  1. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  2. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  3. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  4. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

  5. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  6. input type="file"文件上传时得到文件的本地路劲

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  7. input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

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

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

  9. input type file onchange上传文件的过程中,同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

随机推荐

  1. datetimepicker一个不错的日历android特效

    datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...

  2. DataSet读取数据

    using System.Data; using System.Data.SqlClient; namespace ConsoleApplication3 { class Program { stat ...

  3. ruby 简介

    Ruby 是一个注重均衡的语言,它的发明者松本行弘 Yukihiro “Matz” Matsumoto,混合了他喜欢的语言(Perl. Smalltalk. Eiffel. Ada 和 Lisp ) ...

  4. js 滚动 学习

    // s:= 'document.getElementsByName(''seccodeverify'')[0].scrollTop=100;'; // s:='scrollTo(0,document ...

  5. CSS3转换

     一.2D转换 1.css3 rotate()旋转 通过指定的角度参数对原元素指定一个2D rotation(2D 旋转) 语法: transform:rotate(<angle>);   ...

  6. 自定义shape文件

    1.shape文件 btn_bg.xml文件内容 <?xml version="1.0" encoding="utf-8"?> <shape ...

  7. Appium移动自动化测试之安装Android SDK和JDK

    安装好Appium后,我们来继续安装Android SDK和JDK,JDK的安装以及环境变量配置这边就不再多说了,毕竟都是从事自动化的,这个应该是so easy.闲言少续,我们来操作Android S ...

  8. cefsharp在xp上运行

    今天遇到一个坑.也是自己英语不足的体现.在xp上运行cefsharp.wpf. 查询了各种资料.按照说明一步一步的操作,都没有解决xp上运行cefsharp.wpf. 而且在xp上调试都不知道错误在哪 ...

  9. mysql计划字段中有多少个逗号,或者某个标识符

    eg:计划url中有多少个小数点 select length('www.mysql.com')-length(REPLACE('www.mysql.com','.',''));

  10. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...