遇到项目，要求做一个影像系统，对于前端开发需要了解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是最后执行的，在正式读取文件之后。
我们创建了一个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编码写入这些数据，服务器端就已经生成了相同的图片，然后把图片地址保存到数据库中。（虽然说可以直接把这些数据存入数据库中，不过你可以想象一下，数据库中一个字段存这么多数据会是多么壮观的事情）。
另外：
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上传类型控制的更多相关文章

  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. 前端三大框架（Angular Vue React）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  2. spring + mybatis + mysql/oracle开发

    1)创建一个spring-mybatis-mysql这么一个javaweb或java工程 2)导入spring-ioc,spring-aop,spring-transaction,mybatis,c3 ...

  3. ClosureTable

    1. 查询所有子节点 SELECT `chidren_id` FROM `xi_category4_closure` WHERE `parent_id` = 0 AND `distance` > ...

  4. 27.IP承载网容量仿真

    接入,汇聚,核心 参考资料: 学堂在线,移动通信技术(2019秋)https://next.xuetangx.com/learn/SZIIT61031001367/SZIIT61031001367/1 ...

  5. 【C/C++开发】【Java开发】JNI的替代者—使用JNA访问Java外部功能接口

    JNI的替代者-使用JNA访问Java外部功能接口 1. JNA简单介绍 先说JNI(Java Native Interface)吧,有过不同语言间通信经历的一般都知道,它允许Java代码和其他语言( ...

  6. Element-UI 框架 el-scrollbar 组件

    Element-UI 框架 el-scrollbar 组件:https://juejin.im/post/5c83d5ac5188257e1c4dc9e7

  7. [转帖]Java高级系列——注解（Annotations）

    Java高级系列——注解(Annotations) 2018年01月13日 :: RonTech 阅读数 3405更多 所属专栏: Java高级系列文章 版权声明:转载请注明出处,谢谢配合. http ...

  8. 解决Win7上的连接access数据库的问题

    最近做了一个win桌面程序,没有用sql 数据库,而是用access数据库,因为access比sql用起来方便多了,最主要是不要安装sql server,直接放在程序里面,然后创建连接字符就可以了,s ...

  9. Spring5的总体架构图

    Spring5的主体架构图 主要是四大部分:Web.Data Access/Integration.Core Container.中间层,具体见下图:

  10. 基于Docker 搭建 Jenkins

    ⒈下载镜像 要使用最新的LTS: docker pull jenkins/jenkins:lts 要使用最新的每周 docker pull jenkins/jenkins ⒉运行 docker run ...