遇到项目，要求做一个影像系统，对于前端开发需要了解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. ZT：在mybatis的Mapping文件写入表名 出现异常ORA-00903: 表名无效 的解决

    简而言之,把#{tablename}换成${tablename}就能解决问题. 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:htt ...

  2. C#txt文件创建并写入信息

    public static void LogWrite(string str) { //项目根目录 string path = HttpContext.Current.Server.MapPath(& ...

  3. LVS系列三、LVS集群-IP-TUN模式

    一.LVS-IP TUN集群概述 DR方式是通过MAC,规模是一个交换网络.而TUN方式,是通过给数据包加上新的IP头部来实现,这个可以跨整个广域网.TUN模式可以解决DR模式下不能跨网段的问题,甚至 ...

  4. nohup 不废话应用

    后台运行 nohup ./hello > myout.file 2>&1 & 本界面可以通过 jobs -l 查看后台 top 也能找到PID号 杀进程 kill PID

  5. SQL Server 修改默认实例

    有一台服务器,里面装了两个版本的数据库,一个2008(实例名称为MSSQLSERVER),一个2017(实例名称为MSSQLSERVER01): Sql server 数据库可以安装多个数据库实例,但 ...

  6. SpringBoot之解决一对一、多对一、多对多等关联实体在JSON序列化/输出时产生的无限递归死循环问题(infinite recursion)

    前言 这问题着实让人苦不堪言,有必要把它记下了. @JsonBackReference [亲测有效] 1.使用注解@JsonBackReference标记在有关联关系的实体属性上 2.仅导入此注解类有 ...

  7. Java 基础篇之lambda

    Lambda 示例 public interface Eatable { void taste(); } public interface Flyable { void fly(String weat ...

  8. 【miscellaneous】VLC组播与接收

    搭建组播服务器  第一步:运行程序后选择"媒体--串流": 第二步:通过"添加"选择需要播放的文件(以wmv文件为例),单击"串流": 第三 ...

  9. hdoj1520（入门树形dp）

    题目链接:https://vjudge.net/problem/HDU-1520 题意:和luogu那道没有上司的舞会一样的题,给定一棵带点权的树,父结点和子结点不能同时选,问怎么选使得权值和最大,求 ...

  10. gdb移植（设备端本地版本）

    Gdb下载地址:http://ftp.gnu.org/gnu/gdb/ ncurse下载地址:http://ftp.gnu.org/pub/gnu/ncurses/ 目录结构如下: ├── insta ...