<input type='file' />

inputDom.onchange=function (e){

  e.currentTarget.files  是只有一个对象的数组

  var obj = e.currentTarget.files[0]  是一个对象 上面有name、type、size等属性

  var windowURL = window.URL || window.webkitURL || window.mozURL 一个类

  var imgSrc = windowURL.createObjectURL(obj);  windowURL这个类上有一个createObjectURL的方法,能解析上面那个文件的obj,返回一个src,是一个二进制的大文件,类似 blob:null/19c43c4c-fd5d-4f5a-ae4e-08885e986017

  然后就能把图片写上src,然后显示  imgDom.style.src=imgSrc

}

input type=file的几个属性的更多相关文章

  1. python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  2. <input type="file"> accept属性筛选文件类型

    如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input ty ...

  3. jQuery 在IE下对表单中input type="file"的属性值清除

    对一个文件域(input type=file)使用了验证后,我们总会希望把文件域中的值给清空了,在IE中,由于安全设置的原因,是不允许更改文件域的值的,接下来为大家介绍一下解决方法 一般来说,在对一个 ...

  4. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  5. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  6. <input type="file">火狐兼容

    <input type="file">放着a标签下火狐不兼容 <a href=""><input type="file& ...

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

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

  8. <input type="file" />浏览时只显示指定文件类型

    <input type="file" />浏览时只显示指定文件类型 <input type="file" accept="appli ...

  9. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

随机推荐

  1. oracle和mysql批量合并对比

    orm框架采用mybatis,本博客介绍一下批量合并merge用oracle和mysql来做的区别, oracle merge合并更新函数的详细介绍可以参考我以前的博客:https://blog.cs ...

  2. 编译安装Keepalived2.0.0

    简介 Keepalived是基于vrrp协议的一款高可用软件.Keepailived有一台主服务器和多台备份服务器,在主服务器和备份服务器上面部署相同的服务配置,使用一个虚拟IP地址对外提供服务,当主 ...

  3. 简述java接口和C++虚类的相同和不同之处

    C++虚类相当于java中的抽象类,与接口的不同处是: 1.一个子类只能继承一个抽象类(虚类),但能实现多个接口 2.一个抽象类可以有构造方法,接口没有构造方法 3.一个抽象类中的方法不一定是抽象方法 ...

  4. Docker进阶之七:管理应用程序数据

    管理应用程序数据:Volume Docker提供三种不同的方式将数据从宿主机挂载到容器中:volumes,bind mounts和tmpfs. volumes:Docker管理宿主机文件系统的一部分( ...

  5. JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署

    接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...

  6. WCF优雅使用 KnownType标记的方法

    [KnownType("DerivedTypes")] [DataContract] public abstract class TaskBase { // other class ...

  7. 学JAVA第十七天,接口与抽象方法

    JAVA接口可以让代码更加有合理的规范性,就想一个项目小组,组长要负责把成员的代码整合,但是每个成员写的方式都是按照他们自己的想法来写的, 所以,整合起来就非常麻烦. 但是,如果我们的组长制作了一个接 ...

  8. oracle学习笔记(五) SQL操作符

    SQL操作符 算术操作符:+加,-减,*乘,/除 比较操作符: <,>,=,!=,<>,<=,>= 常用的判断,<>和!=相同 between $low ...

  9. 【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法

    1 借用JSON对象的parse和stringify function deepClone(obj){ let _obj = JSON.stringify(obj), objClone = JSON. ...

  10. xml代码 解决eclipse乱码问题

    <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springf ...