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

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Li_Qing_Xue/article/details/78919499 图片加载很是重要,我也对比过 ...

  2. redis2. sds 字符串（SimpleDynamicString）

    1.标准strcat 会有溢出风险,sdscat无溢出风险 2.空间预分配,惰性空间释放 空间预分配:sds分配空间时,如果原来是5,free是0, sdscat追加一个10长度的,此时字符串加长到1 ...

  3. 宝塔安装Nextcloud，挂载在阿里云oss上，打造个人/企业高效私有云盘

    如下未完整整理,看懂看不懂随缘.... 准备条件: 1.阿里云oss 2.阿里云ecs 3.环境:centos7.x 步骤: 1.centos中安装宝塔面板 2.下载NextCloud安装包,上传到宝 ...

  4. Hibernate3映射数据类型

    1. 在实际开发中需要在hbm文件中使用的type属性值是指定的类型.那    么指定的类型一般的是基于hibernate的类型.2. 当然在实际过程中也可以在hbm文件中指定java类型. publ ...

  5. error: atomic: 没有那个文件或目录

    Linux下编译的时候遇到一个问题,就是提示    error: atomic: 没有那个文件或目录 执行的命令是gcc -o myCXXLog myCXXLog.c 经过网上搜索,解决方法有二 (1 ...

  6. sublime的简单配置(解决为什么package control无效)

    1:下载sublime text 3 要到它的官网下载,要英文的. 2:安装sublime的包. 进入sublime按快捷键ctrl+~(~是键盘左上角Esc下面的键). 3:在这里面输入如下代码.( ...

  7. [Feature] Build pipeline

    准备数据集 一.数据集 Ref: 6. Dataset loading utilities[各种数据集选项] 第一部分,加载原始iris数据集的数据: 第二部分,先增加一行,再增加一列: #%% pa ...

  8. 在Python中使用lambda高效操作列表的教程

    在Python中使用lambda高效操作列表的教程 这篇文章主要介绍了在Python中使用lambda高效操作列表的教程,结合了包括map.filter.reduce.sorted等函数,需要的朋友可 ...

  9. 后缀数组--summer-work之我连模板题都做不起

    这章要比上章的AC自动机要难理解. 这里首先要理解基数排序:基数排序与桶排序,计数排序[详解] 下面通过这个积累信心:五分钟搞懂后缀数组!后缀数组解析以及应用(附详解代码) 下面认真研读下这篇: [转 ...

  10. Node线上部署管理器PM2

    PM2是一个带有负载均衡功能的Node应用的进程管理器.PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目.PM2是Node线上部署完美的管理工具. PM2 ...