有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制

发布时间：2023-09-06 01:30责任编辑：彭小芳关键词：HTML

遇到项目，要求做一个影像系统，对于前端开发需要了解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上传类型控制

原文地址：http://www.cnblogs.com/shj-com/p/8043246.html

有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制

知识推荐