有关图片上传的相关知识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"> ...
随机推荐
- HDFS文件目录操作代码
分布式文件系统HDFS中对文件/目录的相关操作代码,整理了一下,大概包括以下部分: 文件夹的新建.删除.重命名 文件夹中子文件和目录的统计 文件的新建及显示文件内容 文件在local和remote间的 ...
- Canal——增量同步MySQL数据到ElasticSearch
1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.x版本,目前貌似不支持7.x版本: Kibana:6.x版本: Canal.deployer:1 ...
- Swift的if let和guard let的使用 <一看就懂哟>
// // ViewController.swift // 可选项的判断 // // Created by 思 彭 on 16/9/16. // Copyright © 2016年 思 彭. All ...
- docker MySQL官方版本使用记录
docker MySQL官方版本使用记录 使用记录 拉取官方镜像:docker pull mysql 运行镜像:docker run --name mysql -p 3306:3306 -e MYSQ ...
- 如何使用QTP12 UFT做功能性测试(转载)
首先,按照本博客的安装教程走的,右键管理员运行 接下来点击继续,这个界面只需要勾选到web即可 点击ok,开始运行 进入到主界面之后,file新建一个测试. 可以修改路径等等 点击create之后,出 ...
- harbor API 与tag 清理
harbor API 官方swagger swagger在线查看 harbor tag 清理 python程序 import requests import json class RequestCli ...
- USACO 1.1 Greedy Gift Givers
模拟. 如果用$map$的话,会很好写. 如果你不会$map$的话,在此小广告:https://blog.csdn.net/CQBZLYTina/article/details/80063739 /* ...
- 【并行计算-CUDA开发】关于共享内存(shared memory)和存储体(bank)的事实和疑惑
关于共享内存(shared memory)和存储体(bank)的事实和疑惑 主要是在研究访问共享内存会产生bank conflict时,自己产生的疑惑.对于这点疑惑,网上都没有相关描述, 不管是国内还 ...
- 微信图片上传 wx.Imagechoose
拍照或从手机相册中选图接口 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩 ...
- BandingList 泛型集合数据绑定
public IList<Student> IStudent = new List<Student>(); public BindingList<Student> ...