有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解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是最后执行的,在正式读取文件之后。
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上传类型控制的更多相关文章
- Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
<input> 无限制输入 type 限制输入 type = 如下类型 type 后还可以跟一些属性: 如<input type=text max ...
- input type="file"多图片上传 原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- struts2 s:file标签使用及文件上传例子
<s:form action="uploadaction" method="post" enctype="multipart/form-da ...
- 文件上传---form表单,ajax,jquery,以及iframe无刷新上传 (processData,contentType讲解)
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- php 下 html5 XHR2 + FormData + File API 上传文件
FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...
- i利用图片按钮 和 input type="image" 为背景提交表单
<img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...
- HTML相关知识
1 Day01HTML HTML5声明:<!doctype html> <html> 1.1 HTML基本结构: <head> <title>题目< ...
- HTML5form表单的相关知识总结
首先在介绍HTML5form表单的新增内容之前,我总结了一下HTML的form表单的内容. <!DOCTYPE html> <html lang="en"> ...
随机推荐
- win10自定义右键新建文件
新建.reg文件,如添加py文件 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.py\ShellNew] "NullFil ...
- NET全控件
NBSI WebSite Injection ReportSite Address: www.xmht.comInject URL: http://www.xmht.com/news.aspx?sty ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-1.SpringBoot整合微信支付开发在线教育视频站点介绍
笔记 第一章项目介绍和前期准备 1.SpringBoot整合微信支付开发在线教育视频站点介绍 简介: 课程介绍,和小D课堂在线教育项目搭建开发 1.课程大纲介绍 2.微信支付项 ...
- IDEA 2017 安装和破解
IDEA 2017 下载地址 链接:http://pan.baidu.com/s/1qXNa9UO 密码:9wwg 激活注册码:http://xidea.online 1-选择安装地址 2-选择安装的 ...
- kettle在windows下面部署定时任务
KETTLE有三大块: Spoon:转换/工作(transform/job)设计工具,主要是GUI方式. Kitchen:工作(job)执行器,是一个作业执行引擎,通过命令行的方式带参数执行,参数说明 ...
- yii findAll方法
$users = $this->user->find(array( 'select'=>array('id','username','email'), 'order' => ' ...
- 【使用新版mysql驱动的改变】---记忆犹新
关于 版本的问题: 之前安装数据库的时候 安装的mysql 8.0 脚本文件来自5.7 的数据库 maven版本3.5.3 jdk1.8 tomcat 9 跑maven项目的时候 遇到各种问题 ...
- dockerfile文件命令详解
Dockerfile 一般分为四部分:基础镜像信息.维护者信息.镜像操作指令和容器启动时执行指令,’#’ 为 Dockerfile 中的注释: Dockerfile的指令根据作用可以分为两种:构建指令 ...
- Linux三种SSH协议登陆方式
在实际工作中遇到了三种不同SSH协议登陆Linux服务器的方式,由简单到复杂分别阐述:一.最简单也是最不安全的root账号密码登陆通过root账号+root密码登陆Linux服务器. 二.普通用户登陆 ...
- Centos7 安装Jenkins (rpm 方式)
首先说明本教程基于jenkins 2.183,但是其他版本基本差不多,主要说一下其中比较坑的几点,做一个总结. 1.rpm 包的下载 从官网上下载rpm的速度简直让人不能忍受,所以千万不要去官网下载. ...