大家好，又见面了，我是全栈君。
文件上传
文件的点后面的后缀名和Flie.type的类型为一直，如果点后面的后缀名为空，那么type就是空的
图片上传实现了上传
html
<img id="img1" src="" style="width:500px;" >
<div id="dropbox" style="border: 1px solid red;width: 200px; height: 200px" ></div>
<form action="test.php" method="post" >
<input type="file" name="img" multiple="multiple" onchange="fileinfo(this.files)">
<button type="submit">提交</button>
</form>
script
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function fileinfo(files){
console.log(files);
var reader = new FileReader();
reader.readAsDataURL(files[0]);
console.log(files[0]);
reader.onload=function(e){
// console.log(e.target.result);
// $("#text").append(e.target.result);
$("#img1").attr("src",e.target.result);
}
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
fileinfo(files);
}
核心知识点：
1、Flie
文件(File) 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象。
例如：
var filesObjs=$("input")[0].files;
/*
files 是个文件列表，里面包含多个文件，如果只是读取一个，或者第一个应该是 files[0]. 以下以一个文件为例子。
files 是个原生API 所以需要转换为原生DOM操作files
*/
var filesObj=$("input")[0].files[0];
console.log(filesObj)输出为：
File接口也继承了Blob接口的属性：返回当前
File对象所引用文件最后修改时间， 自 1970年1月1日0:00 以来的毫秒数。返回当前
File对象所引用文件最后修改时间的Date对象。
File.name只读返回当前
File对象所引用文件的名字。
File.size只读返回文件的大小。
返回
File相关的 path 或 URL。
File.type只读返回文件的MIME类型
类型 描述 典型示例 text表明文件是普通文本，理论上是可读的语言 text/plain,text/html,text/css, text/javascriptimage表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型 image/gif,image/png,image/jpeg,image/bmp,image/webpaudio表明是某种音频文件 audio/midi,audio/mpeg, audio/webm, audio/ogg, audio/wavvideo表明是某种视频文件 video/webm,video/oggapplication表明是某种二进制数据
application/octet-stream,application/pkcs12,application/vnd.mspowerpoint,application/xhtml+xml,application/xml,application/pdf,
application/json
2、FileReader
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
通过构造函数FileReader()返回一个新构造的FileReader。
var reader = new FileReader();其中 reader.readAsDataURL()可以读取文件URL
如上方给出的例子
function fileinfo(files){
var reader = new FileReader();
reader.readAsDataURL(files[0]);//先读取
reader.onload=function(e){//读取完毕了 取出result
$("#img1").attr("src",e.target.result);
}
}如果不知道 e.target.result 哪里来的，可以打印一下 e .
扩展
JavaScript-Load-Image 加载和转换图像文件的JavaScript库。
可以读取简单的图片base64 信息
Exif.js
用于从图像文件读取EXIF元数据的 JavaScript库。
这个比较全 但是一些经过微信保存的图片，信息貌似读取不出来
转载于:https://my.oschina.net/swmhxhs/blog/1595649
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/107802.html原文链接：https://javaforall.net
