遇到项目，要求做一个影像系统，对于前端开发需要了解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. 慎用String.intern()作为synchronized的对象锁

    https://www.cnblogs.com/yhlx/p/3498387.html

  2. python写入csv方法总结

    最常用的一种方法,利用pandas包 import pandas as pd #任意的多组列表 a = [1,2,3] b = [4,5,6] #字典中的key值即为csv中列名 dataframe ...

  3. 深度学习之GAN对抗神经网络

    1.结构图 2.知识点 生成器(G):将噪音数据生成一个想要的数据 判别器(D):将生成器的结果进行判别, 3.代码及案例 # coding: utf-8 # ## 对抗生成网络案例 ## # # # ...

  4. C# VS预生成事件命令行 和 生成后事件命令行

    宏 说明 $(ConfigurationName) 当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir) 输出文件目录的路径,相对于项目目录.这解析为“输出目录”属性的值. ...

  5. router-link跳转页面传递参数及页面刷新方法

    使用router-link传参: 第一种: 路径:http://localhost:8080/goodListP?id=2 跳转的页面获取参数: this.$route.query.id 第二种: 路 ...

  6. 精通Dubbo——dubbo2.0源码中的设计模式与SPI介绍

    Dubbo源码包介绍当我们从github把Dubbo源码下载下来之后有如下源码包   下面来说明每个包的作用,以便我们有目的的阅读代码 dubbo-admin dubbo管理平台源码包,用来管理dub ...

  7. JAVA中注解的实现原理

    注解的本质 「java.lang.annotation.Annotation」接口中有这么一句话,用来描述『注解』. The common interface extended by all anno ...

  8. python代码中判断版本

    在python代码中判断python版本: if sys.version_info < (3, 0): lib.make_flows.argtypes = [c_char_p, c_char_p ...

  9. appium+python+Windows自动化测试文档

    appium+python自动化测试文档 一.认识appium 1.    什么是appium appium是开源的移动端自动化测试框架: appium可以测试原生的.混合的.以及移动端的web项目: ...

  10. android#嵌入式布局并创建自定义控件

    一.如何在android中嵌入布局文件: 新建一个布局title.xml,该文件为公共文件 <LinearLayout xmlns:android="http://schemas.an ...