遇到项目，要求做一个影像系统，对于前端开发需要了解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. P4095 [HEOI2013]Eden 的新背包问题

    P4095 [HEOI2013]Eden 的新背包问题 题解 既然假定第 i 个物品不可以选,那么我们就设置两个数组 dpl[][] 正序选前i个物品,dpr[][] 倒序选前i个物品 ,价格不超过 ...

  2. Android关闭通知栏后toast无法提示的解决方案

    https://github.com/getActivity/ToastUtils PS:release版本注意加上混淆规则

  3. 操作 SQL语句之数据操作语言（DML）详解

    一.插入数据(INSERT) MariaDB [(none)]> help insertName: 'INSERT'Description:Syntax:INSERT [LOW_PRIORITY ...

  4. 指定JSON.toJSONString中实体类属性的输出顺序

    最近在使用JSON.toJSONString过程中出现实体类的属性与转换之前的顺序不一致 public static void main(String[] args) { Person person ...

  5. 手写web框架之加载Controller，初始化框架

    1,加载Controller     我们需要创建 一个ControllerHelper类,让它来处理下面的逻辑:      通过ClassHelper我们可以获取所有定义了Controller注解的 ...

  6. coreDNS一直处于创建中解决

    https://blog.csdn.net/gsying1474/article/details/53256599 执行: [root@lab1 coredns]# kubectl delete -f ...

  7. 完整搭建一个vue项目

    目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...

  8. mysql 添加表情 Incorrect string value: '\xF0\x9F\x98\x8

    方法1:使用utf8mb4的mysql编码来容纳这些字符 注意:要使用utf8mb4类型,首先要保证Mysql版本要不低于 MySQL 5.5.3. 第一步:修改my.ini配置文件 [mysql]# ...

  9. 深入理解C语言-深入理解指针

    关于指针,其是C语言的重点,C语言学的好坏,其实就是指针学的好坏.其实指针并不复杂,学习指针,要正确的理解指针. 指针是一种数据类型 指针也是一种变量,占有内存空间,用来保存内存地址 指针就是告诉编译 ...

  10. Java基础知识常见面试题汇总第一篇

    [Java面试题系列]:Java基础知识常见面试题汇总 第一篇 文中面试题从茫茫网海中精心筛选,如有错误,欢迎指正! 1.前言 ​ 参加过社招的同学都了解,进入一家公司面试开发岗位时,填写完个人信息后 ...