<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. Python编程Day1——计算机组成与操作系统

    一..计算机基础 二.编程与编程的目的 1.什么是语言? 一种事物与另外一种事物沟通的介质 编程语言是程序员与计算机沟通的介质 2.什么是编程? 程序员把自己想要让计算机做的事用编程语言表达出来,编程 ...

  2. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十一 || AOP自定义筛选,Redis入门 11.1

    代码已上传Github+Gitee,文末有地址 书说上文<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之十 || AOP面向切面编程浅 ...

  3. Python自省

    自省就是通过一定机制查询到对象的内部结构,也就是运行时获取对象内部的属性以及类型,在Python中dir(),type(), hasattr(), isinstance()都是很好的自省例子 #!/u ...

  4. 什么是Servlet(原理,从访问到方法)

    Servlet简介 Servlet是SUN公司提供的一门用于开发动态WEB资源的技术.SUN公司在其API中提供了一个Servlet接口,用户若想开发一个动态WEB资源(即开发一个Java程序向浏览器 ...

  5. Angular开发技巧

    由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...

  6. 使用EHPC实现“完美并行”的高效批处理方案

    使用EHPC实现“完美并行”的高效批处理方案 在高性能计算场景中,用户一次业务计算可以划分为大量的任务,每个任务的处理逻辑相同,但是输入文件.参数设置和输出文件不同.由于每个任务处理逻辑相似,执行时彼 ...

  7. 关于CSS引入方式的详细见解

    关于CSS的发展史这里不做介绍.写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴,希望自己写的帖子能对伙伴有些许帮助:原因之二这些帖子也算自己的一个知识的整理.现在还没有一定的顺序可循,但 ...

  8. C#工具:反射帮助类 泛型反射帮助类

    反射帮助类 using System; using System.Reflection; using System.Data; using System.Drawing; using System.R ...

  9. MySQL 笔记整理(18) --为什么这些SQL语句逻辑相同,性能却差异巨大?

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 18) --为什么这些SQL语句逻辑相同,性能却差异巨大? 本篇我们以三 ...

  10. 【升鲜宝】生鲜配送管理系统_升鲜宝 V2.0 按客户商品分类分开打印配送与按客户商品分类导出相关订单商品相关说明(一)

    [升鲜宝]生鲜配送管理系统_升鲜宝 V2.0 按[客户]的商品分类分开打印(配送单)与按[客户]商品分类[对账单]导出相关销售订单商品功能相关说明(一) 业务场景概述与痛点 1.中小学校食堂的客户,每 ...