在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. hdu4607 Park Visit(树的直径)

    Park Visit Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. DB2 runstats、reorgchk、reorg 命令

    runstats.reorgchk.reorg 1.runstats runsats可以搜集表的信息,也可以搜集索引信息.作为runstats本身没有优化的功能,但是它更新了统计信息以后,可以让DB2 ...

  3. HTML页面弹出自定义对话框带遮蔽罩(使用JavaScript)

    转载:http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html 原理其实很简单:首先绘制弹出的自定义对话框,将其使用display:none隐藏,因为设 ...

  4. erlang,elixir安装

    erlang下载地址:https://packages.erlang-solutions.com/erlang/ elixir(precompile版)下载地址:https://github.com/ ...

  5. 关于representation的理解

    目前见过的定义的比较确切的是Yoshua Bengio在ACL2010的一篇paper中关于word representation的定义: " A word Representation i ...

  6. js常用方法

    若未声明,则都是js的方法 1.indexOf indexOf(str):默认返回字符串中第一次出现索引位置 的下标,没有则返回-1 indexOf(str,position):返回从position ...

  7. 内省、JavaBean、PropertyDescriptor类、Introspector类、BeanUtils工具包、注解、Rentention、Target、注解的基本属性和高级属性

      本文转载自:http://blog.sina.com.cn/s/blog_5d65a16901011kom.html 关键字:内省.JavaBean.PropertyDescriptor类.Int ...

  8. java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory的解决(碰到问题,转载答案)

    自己前一段时间出现了这个问题,通过在网上搜索,大概知道了原因,整理下一,以供大家参考. 将项目部署好后,启动tomcat后报错,java.lang.NoClassDefFoundError: org/ ...

  9. controller错误统一处理--------@ExceptionHandler

    用@RequestBody,@ResponseBody,不费吹灰之力就解决了JSon自动绑定.接着就发现,如果遇到RuntimeException,需要给出一个默认返回JSON 三种方式: 1.当这个 ...

  10. RVM 多版本Ruby管理-Gentoo

    发现了一个非常Amzaing的Ruby的工具RVM,用于安装和管理Ruby的多个版本.相比较于直接在系统中安装不同版本的Ruby,然后使用时切换到对应的版本,这种方式实在是酷毙了,使ruby安装变得非 ...