文件上传/上传图片预览

2019独角兽企业重金招聘Python工程师标准>>>

文件上传

文件的点后面的后缀名和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.lastModified 只读

返回当前 File 对象所引用文件最后修改时间， 自 1970年1月1日0:00 以来的毫秒数。

File.lastModifiedDate 只读 

返回当前 File 对象所引用文件最后修改时间的 Date 对象。

File.name 只读

返回当前 File 对象所引用文件的名字。

File.size 只读

返回文件的大小。

File.webkitRelativePath 只读 

返回 File 相关的 path 或 URL。

File.type 只读

返回文件的MIME类型

 

类型	描述	典型示例
text	表明文件是普通文本，理论上是可读的语言	text/plain, text/html, text/css, text/javascript
image	表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型	image/gif, image/png, image/jpeg, image/bmp, image/webp
audio	表明是某种音频文件	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
video	表明是某种视频文件	video/webm, video/ogg
application	表明是某种二进制数据	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