遇到项目,要求做一个影像系统,对于前端开发需要了解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. win10自定义右键新建文件

    新建.reg文件,如添加py文件 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.py\ShellNew] "NullFil ...

  2. NET全控件

    NBSI WebSite Injection ReportSite Address: www.xmht.comInject URL: http://www.xmht.com/news.aspx?sty ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍

    笔记 第一章项目介绍和前期准备 1.SpringBoot整合微信支付开发在线教育视频站点介绍     简介: 课程介绍,和小D课堂在线教育项目搭建开发 1.课程大纲介绍         2.微信支付项 ...

  4. IDEA 2017 安装和破解

    IDEA 2017 下载地址 链接:http://pan.baidu.com/s/1qXNa9UO 密码:9wwg 激活注册码:http://xidea.online 1-选择安装地址 2-选择安装的 ...

  5. kettle在windows下面部署定时任务

    KETTLE有三大块: Spoon:转换/工作(transform/job)设计工具,主要是GUI方式. Kitchen:工作(job)执行器,是一个作业执行引擎,通过命令行的方式带参数执行,参数说明 ...

  6. yii findAll方法

    $users = $this->user->find(array( 'select'=>array('id','username','email'), 'order' => ' ...

  7. 【使用新版mysql驱动的改变】---记忆犹新

    关于 版本的问题: 之前安装数据库的时候  安装的mysql 8.0  脚本文件来自5.7 的数据库 maven版本3.5.3 jdk1.8 tomcat 9 跑maven项目的时候  遇到各种问题 ...

  8. dockerfile文件命令详解

    Dockerfile 一般分为四部分:基础镜像信息.维护者信息.镜像操作指令和容器启动时执行指令,’#’ 为 Dockerfile 中的注释: Dockerfile的指令根据作用可以分为两种:构建指令 ...

  9. Linux三种SSH协议登陆方式

    在实际工作中遇到了三种不同SSH协议登陆Linux服务器的方式,由简单到复杂分别阐述:一.最简单也是最不安全的root账号密码登陆通过root账号+root密码登陆Linux服务器. 二.普通用户登陆 ...

  10. Centos7 安装Jenkins (rpm 方式)

    首先说明本教程基于jenkins 2.183,但是其他版本基本差不多,主要说一下其中比较坑的几点,做一个总结. 1.rpm 包的下载 从官网上下载rpm的速度简直让人不能忍受,所以千万不要去官网下载. ...