有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发。工欲善其事,必先利器嘛。度娘一阵子搜索,找资料。这年头,需要的是你解决问题的能力啊!
参考应用:https://www.cnblogs.com/sunliyuan/p/5737928.html
http://blog.okbase.net/jquery2000/archive/1296.html(解释的也很清楚)
http://blog.csdn.net/qingyjl/article/details/52003567
文件(File)
接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。
File
接口基于Blob,继承了 blob的功能并将其扩展使其支持用户系统上的文件。Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。
有关于file的官方文档,可以参看一个较为专业的官网:https://developer.mozilla.org/zh-CN/docs/Web/API/File 这个里面讲述的非常详细,有时间多看看。
这里可以了解到file接口的属性。
File.name;返回当前
File
对象所引用文件的名字。
File.size;返回文件的大小。
File.lastModified;返回当前
File
对象所引用文件最后修改时间, 自 1970年1月1日0:00 以来的毫秒数。
File.webkitRelativePath 返回
File
相关的 path 或 URL。
是时候来个例子,
- // fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
- var fileInput = document.getElementById("myfileinput");
- // files is a FileList object (simliar to NodeList)
- var files = fileInput.files;
- for (var i = 0; i < files.length; i++) {
- var type = files[i].type;
- var name = files[i].name;
- alert("Filename: " + name + " , Type: " + type);
- }
files 是一个 FileList 对象(类似于NodeList对象)。input里type=file里都有这个files属性,意为获取文件集合。
再上个完整例子:
- <!DOCTYPE HTML>
- <html>
- <head>
- </head>
- <body>
- // multiple属性可以让用户能选择多个文件
- <input id="myfiles" multiple type="file">
- </body>
- <script>
- var pullfiles=function(){
- // 获取到input元素
- var fileInput = document.querySelector("#myfiles");
- var files = fileInput.files;
- // 获取到所选文件数量
- var fl=files.length;
- var i=0;
- while ( i < fl) {
- var file = files[i];
- alert(file.name);
- i++;
- }
- }
- // 设置change事件处理函数
- document.querySelector("#myfiles").onchange=pullfiles;
- </script>
- </html>
好了,到这里我们来讲一下上传图片,将图片显示出来放到页面的方法。HTML5读取input[type=file]中的图片
参考资料:《HTML5学习之FileReader接口》——http://blog.csdn.net/zk437092645/article/details/8745647
来个demo
- <form id="imgForm">
- <input type="file" class="addBorder">
- <br/>
- <button type="button" onclick="loadImg()">获取图片</button>
- </form>
- <div class="addBorder" id="imgDiv">
- <img id="imgContent">
- </div>
- function loadImg(){
- //获取文件
- var file = $("#imgForm").find("input")[0].files[0];
- //创建读取文件的对象
- var reader = new FileReader();
- //创建文件读取相关的变量
- var imgFile;
- //为文件读取成功设置事件
- reader.onload=function(e) {
- alert('文件读取完成');
- imgFile = e.target.result; //获取当前文件的内容
- console.log(imgFile);
- $("#imgContent").attr('src', imgFile);
- };
- //正式读取文件
- reader.readAsDataURL(file);
- }
- 这里要注意 reader.onload是最后执行的,在正式读取文件之后。
- reader.readAsDataURL(file);//转化为base64格式。
还有的是转化为blob对象的,可以参看网站 https://www.cnblogs.com/saysmy/p/5626337.html
- <input type="file" name="2" class="file" accept="image/*" capture="camera" id="file39" />
- var file = document.getElementById(idFile);
- var fileList = file.files; //获取的图片文件
- var imgUrl = window.URL.createObjectURL(fileList[i]);
- 可以参考网站:http://blog.csdn.net/fd214333890/article/details/71250488
有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制的更多相关文章
- Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
<input> 无限制输入 type 限制输入 type = 如下类型 type 后还可以跟一些属性: 如<input type=text max ...
- input type="file"多图片上传 原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- struts2 s:file标签使用及文件上传例子
<s:form action="uploadaction" method="post" enctype="multipart/form-da ...
- 文件上传---form表单,ajax,jquery,以及iframe无刷新上传 (processData,contentType讲解)
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- php 下 html5 XHR2 + FormData + File API 上传文件
FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...
- i利用图片按钮 和 input type="image" 为背景提交表单
<img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...
- HTML相关知识
1 Day01HTML HTML5声明:<!doctype html> <html> 1.1 HTML基本结构: <head> <title>题目< ...
- HTML5form表单的相关知识总结
首先在介绍HTML5form表单的新增内容之前,我总结了一下HTML的form表单的内容. <!DOCTYPE html> <html lang="en"> ...
随机推荐
- P1439 【模板】最长公共子序列 LCS
P1439 [模板]最长公共子序列 题解 1.RE的暴力DP O(n2) 我们设dp[i][j]表示,S串的第i个前缀和T串的第j个前缀的最长公共子序列. ◦ 分情况: ◦ ...
- SpringCloud(三)之Feign实现负载均衡的使用
一 点睛 Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个 ...
- python之scrapy爬取jingdong招聘信息到mysql数据库
1.创建工程 scrapy startproject jd 2.创建项目 scrapy genspider jingdong 3.安装pymysql pip install pymysql 4.set ...
- 前端单元测试,以及给现有的vue项目添加jest + Vue Test Utils的配置
文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...
- kubernetes架构(2)
一.Kubernetes 架构: Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. Master 节点 Master 是 Ku ...
- nova创建虚拟机的详细过程
Nova 创建虚拟机详细过程
- 一起学习linux环境的git
第一节 GIT最初是由Linus Benedict Torvalds为了更有效地管理Linux内核开发而创立的分布式版本控制软件,与常用的版本控制工具如CVS.Subversion不同,它不必服务器端 ...
- pixi小游戏开发(vue+typescript)
一直以来都觉得typescript是以后前端发展的趋势,一些大厂的前端项目都已经在用ts来替代js了. 正好最近刚开始准备用pixi写个小游戏,因为刚开工没多久,于是今天就将之前的功能用ts去实现了一 ...
- 导出文档设置exportDocument
<?xml version="1.0" encoding="UTF-8"?> <?eclipse version="3.4" ...
- C# 3Des加密解密
第三方的加密规则约定:加密经过3DES加密后的Base64 编码 最近在对接一个第三方接口,请求参数和响应参数全采用3des加密规则,由于我是用.NET对接的,而第三方是Java开发的,所以两种程 ...