遇到项目，要求做一个影像系统，对于前端开发需要了解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。

是时候来个例子，

  1. // fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
  2. var fileInput = document.getElementById("myfileinput");
  3.  
  4. // files is a FileList object (simliar to NodeList)
  5. var files = fileInput.files;
  6.  
  7. for (var i = 0; i < files.length; i++) {
  8.   var type = files[i].type;
  9.   var name = files[i].name;
  10.   alert("Filename: " + name + " , Type: " + type);
  11.  
  12. }

files 是一个 FileList 对象(类似于NodeList对象)。input里type=file里都有这个files属性，意为获取文件集合。

再上个完整例子：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. // multiple属性可以让用户能选择多个文件
  7.  
  8. <input id="myfiles" multiple type="file">
  9.  
  10. </body>
  11.  
  12. <script>
  13.  
  14. var pullfiles=function(){
  15.     // 获取到input元素
  16.     var fileInput = document.querySelector("#myfiles");
  17.     var files = fileInput.files;
  18.     // 获取到所选文件数量
  19.     var fl=files.length;
  20.     var i=0;
  21.  
  22.     while ( i < fl) {
  23.         var file = files[i];
  24.         alert(file.name);
  25.         i++;
  26.     }
  27. }
  28.  
  29. // 设置change事件处理函数
  30. document.querySelector("#myfiles").onchange=pullfiles;
  31.  
  32. </script>
  33.  
  34. </html>

好了，到这里我们来讲一下上传图片，将图片显示出来放到页面的方法。HTML5读取input[type=file]中的图片

参考资料：《HTML5学习之FileReader接口》——http://blog.csdn.net/zk437092645/article/details/8745647

来个demo

  1. <form id="imgForm">
  2.     <input type="file" class="addBorder">
  3.     <br/>
  4.     <button type="button" onclick="loadImg()">获取图片</button>
  5. </form>  
  6.  
  7. <div class="addBorder" id="imgDiv">
  8.     <img id="imgContent">
  9. </div>  
  1. function loadImg(){
  2.     //获取文件
  3.     var file = $("#imgForm").find("input")[0].files[0];  
  4.  
  5.     //创建读取文件的对象
  6.     var reader = new FileReader();  
  7.  
  8.     //创建文件读取相关的变量
  9.     var imgFile;  
  10.  
  11.     //为文件读取成功设置事件
  12.     reader.onload=function(e) {
  13.         alert('文件读取完成');
  14.         imgFile = e.target.result; //获取当前文件的内容
  15.         console.log(imgFile);
  16.         $("#imgContent").attr('src', imgFile);
  17.     };  
  18.  
  19.     //正式读取文件
  20.     reader.readAsDataURL(file);
  21. }  
  1. 这里要注意 reader.onload是最后执行的，在正式读取文件之后。
我们创建了一个FileReader对象，命名为reader。还声明了一个imgFile变量，这个变量主要用于存储读取文件之后所生成的对应文件的base64码。
    之后这段reader.onload=function(e){}是为读取文件绑定一个onload事件，类似于我们给HTML标签绑定onclick事件，当特定条件达到时，就调用该方法。
    最后的，也是最重要的，就是开始读取文件了。用reader.readAsDataURL(file)，根据大家编程经验也都能看出，就是调用FileReader类中的readAsDataURL方法，并把之前获取的file对象传进去。如果读取成功，则调用reader.onload事件。
    这里，我还把读取结果输入到了控制台中，如下图控制台输出的base64码（部分）为：
    光是一个图片就有这么多数据，具体我没研究过，不过我知道的就是图片越大，数据量也就越大。但是所有图片前一段都是类似的。如上图红色标注部分，都是“data:image/jpeg;base64,”，之后就是图片的正文内容。这个正文内容有什么用呢？我们可以把这些数据用base64编码格式写入对应图片格式的文件中，你会发现，图像出来了。一半我上传图片的方法就是获取图片的base64码，然后传给服务器，服务器再对应地生成一个后缀名一样的文件，并用base64编码写入这些数据，服务器端就已经生成了相同的图片，然后把图片地址保存到数据库中。（虽然说可以直接把这些数据存入数据库中，不过你可以想象一下，数据库中一个字段存这么多数据会是多么壮观的事情）。
另外：
  1. reader.readAsDataURL(file);//转化为base64格式。
    还有的是转化为blob对象的，可以参看网站 https://www.cnblogs.com/saysmy/p/5626337.html
  1. <input type="file" name="2" class="file" accept="image/*"  capture="camera" id="file39"  />
  1. var file = document.getElementById(idFile);
  1. var fileList = file.files; //获取的图片文件
  1. var imgUrl = window.URL.createObjectURL(fileList[i]);
  2.  
  3. 可以参考网站：http://blog.csdn.net/fd214333890/article/details/71250488
  4.  
  1.  

有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制的更多相关文章

  1. Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互

    <input>        无限制输入     type    限制输入 type = 如下类型     type 后还可以跟一些属性: 如<input type=text max ...

  2. input type="file"多图片上传 原生html传递的数组集合

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  3. input type="file"多图片上传

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  4. struts2 s:file标签使用及文件上传例子

      <s:form action="uploadaction" method="post" enctype="multipart/form-da ...

  5. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  6. php 下 html5 XHR2 + FormData + File API 上传文件

    FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...

  7. i利用图片按钮 和 input type="image" 为背景提交表单

    <img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...

  8. HTML相关知识

    1 Day01HTML HTML5声明:<!doctype html> <html> 1.1 HTML基本结构: <head> <title>题目< ...

  9. HTML5form表单的相关知识总结

    首先在介绍HTML5form表单的新增内容之前,我总结了一下HTML的form表单的内容. <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. P1439 【模板】最长公共子序列 LCS

    P1439 [模板]最长公共子序列 题解 1.RE的暴力DP O(n2) 我们设dp[i][j]表示,S串的第i个前缀和T串的第j个前缀的最长公共子序列. ◦          分情况: ◦      ...

  2. SpringCloud（三）之Feign实现负载均衡的使用

    一 点睛 Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个 ...

  3. python之scrapy爬取jingdong招聘信息到mysql数据库

    1.创建工程 scrapy startproject jd 2.创建项目 scrapy genspider jingdong 3.安装pymysql pip install pymysql 4.set ...

  4. 前端单元测试，以及给现有的vue项目添加jest + Vue Test Utils的配置

    文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...

  5. kubernetes架构（2）

    一.Kubernetes 架构: Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. Master 节点 Master 是 Ku ...

  6. nova创建虚拟机的详细过程

    Nova 创建虚拟机详细过程    

  7. 一起学习linux环境的git

    第一节 GIT最初是由Linus Benedict Torvalds为了更有效地管理Linux内核开发而创立的分布式版本控制软件,与常用的版本控制工具如CVS.Subversion不同,它不必服务器端 ...

  8. pixi小游戏开发(vue+typescript)

    一直以来都觉得typescript是以后前端发展的趋势,一些大厂的前端项目都已经在用ts来替代js了. 正好最近刚开始准备用pixi写个小游戏,因为刚开工没多久,于是今天就将之前的功能用ts去实现了一 ...

  9. 导出文档设置exportDocument

    <?xml version="1.0" encoding="UTF-8"?> <?eclipse version="3.4" ...

  10. C# 3Des加密解密

      第三方的加密规则约定:加密经过3DES加密后的Base64 编码 最近在对接一个第三方接口,请求参数和响应参数全采用3des加密规则,由于我是用.NET对接的,而第三方是Java开发的,所以两种程 ...