上传图片当地预览结果完成（兼容IE8）

2024年3月16日 190次阅读 来源: zilan

近来项目里须要用到上传图片并预览的功用，因而写了个jQuery预览图片插件，下载地点。假如有须要的，能够直接下载。第一次写jQuery插件，若有不对的地方，迎接人人斧正。下面是一些相干的知识点。

HTML5 File API

在HTML5 File API涌现前，前端关于文件的操纵的异常有局限性的。出于平安角度斟酌，从当地上传文件时，代码是不可能猎取文件在用户当地的地点。然则File API的涌现，完成了这一功用。File API主要有以下几个接口：

  1. Blob

  2. File

  3. FileList

  4. FileReader

FileList API

当经由过程file控件猎取文件后，能够经由过程该控件的files属性获得FileList对象。FileList对象里保留着挑选的文件，即File对象。在MDN里有以下提醒：

在Gecko 1.9.2之前,经由过程input元素,每次只能挑选一个文件,这意味着该input元素的file
s属性上的FileList对象只能包括一个文件.从Gecko
1.9.2最先,假如一个input元素具有multiple属性,则能够用它来挑选多个文件.

因而须要注重，在默许状态下挑选文件，每次FileList对象里只要一个File文件。
以上传图片为例。File对象保留了“name”,”size”,”type”等图片的信息。

<input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];

FileReader API完成当地图片预览

FileReader用来异步读取当地文件
FileReader对象许可web应用程序异步读取存储在用户盘算机上的文件（或原始数据缓冲区）的内容。我们能够经由过程FileList猎取上传的图片相干信息，然则想要完成当地预览还须要借助FileReader来完成,FileReader能够读取当地图片，并将图片数据转换成base64编码的字符串情势嵌入到页面中。

//建立一个FileReader对象
var reader = new FileReader();
//读取file文件；
reader.readAsDataURL(file);

FileReader供应了几个要领，如readAsText(),readAsDataURL(),readAsArrayBuffer()，离别示意用差别的数据格式来读取上传的文件，并将结果保留在result属性里。
在读取当地文件的过程当中，FileReader供应了一些事宜可供监听。如onprogress,onload,onerror,onabort等。在上传图片的过程当中，常用到的有onprogress事宜在读取数据过程当中周期性挪用，能够用来完成上传进度条结果，onload事宜，当读取操纵胜利完成时挪用。在我们完成上传图片的结果里，就有用到。

//当文件读取胜利后，将结果保留到url变量里；
reader.onload = function(evt) {
    var url = evt.target.result;
}

末了，将该url赋值给img元素的src属性，便能够完成当地图片预览了。
关于兼容性，不兼容IE9及以下浏览器，别的主流浏览器平常都没有题目。

HTML5 URL API

URL对象用于天生指向File对象或许Blob对象的URL。运用URL的优点是能够没必要把文件内容读取到JavaScript中而能够直接运用文件内容。假如经由过程URL对象来完成当地预览，那末只需将天生的File对象的URL传递给img元素的src属性即可。

当运用一个没有完成该组织器的用户代办时，能够经由过程 Window.URL
属性来访问该对象（基于 Webkit 和 Blink 内核的浏览器均可用 Window.webkitURL
替代）。

var url = window.URL || window.webkitURL;

createObjectURL()完成当地图片预览

URL对象有两个要领，离别是createObjectURL()和revokeObjectURL()。

  1. createObjectURL()的作用
    天生文件File对象或许Blob对象的URL对象，经由过程这个URL，能够访问到URL所指向文件的全部内容。

var src = url.createObjectURL(file);

在每次挪用createObjectURL()要领的时刻,都邑建立一个新的对象URL,纵然你已用雷同的对象作为参数建立过。在你不须要这些对象URL的时刻,你应当经由过程挪用 window.URL.revokeObjectURL()要领来开释它们所占用的内容。

  1. revokeOjectURL()的用法

url.revokeObjectURL(src);

参数src是上述我们经由过程createObjectURL建立的URL对象。
关于兼容性，不兼容IE9及以下浏览器，别的主流浏览器平常都没有题目。在MDN里提到，这是一个试验中的功用。

图片预览兼容IE处置惩罚

IE9及以下版本不支撑File API和URL API。因而须要做兼容处置惩罚。
在这里，我们须要用到document.selection。document.selection只要IE支撑。代表了当前激活选中区，即高亮文本块，和/或文档中用户可实行某些操纵的别的元素。selection 对象的典范用处是作为用户的输入，以便辨认正在对文档的哪一部份正在处置惩罚，或许作为某一操纵的结果输出给用户。
在用document.selection前，我们须要先建立选中区。如鼠标选中文本框，等于一个选中区。也能够经由过程js供应的select()要领建立一个选中区。建立了选中区后，我们就能够经由过程document.selection猎取该选中区。假如要对选中区实行操纵，则须要先挪用createRange()要领。

//猎取上传文件控件的值；
file.select();
var url = document.selection.createRange().text;

现有的猎取IE低版本上传文件的value值平常都是这类体式格局，在IE华夏本能够直接经由过程input的value值来猎取上传图片的途径，然则在现实中很少看到运用。详细的人人能够去查查材料。
非IE6版本的IE因为平安题目直接设置img的src没法显现当地图片，然则能够经由过程滤镜来完成。

pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";

到这里，图片当地预览基本就完成了。

    原文作者：zilan
    原文地址: https://segmentfault.com/a/1190000009602487
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞