最近很好奇前端的文件上传功能，因为公司要求做一个支持图片预览的图片上传插件，所以自己搜了很多相关的插件，虽然功能很多，但有些地方不能根据公司的想法去修改，而且需要依赖jQuery或Bootstrap库，所以我就想学下图片上传的原理，试着做一个原生无依赖，而且足够灵活的图片上传插件。话不多说，开整。
1. 大体思路
1.1 首先我们需要考虑用户如何使用我们的插件。
用户引入插件代码后，只需要像下面这样，设置一些参数，然后执行一个方法就生成一个图片上传组件。
&div &&/div&
// 这是用来生成图片上传组件的div
// 设置参数
var options = {
path: '/',
// 上传图片时指定的地址路径，类似form变淡的action属性
onSuccess: function (res) {
// 上传成功后执行的方法，res是接收的ajax响应内容
console.log(res);
onFailure: function (res) {
// 上传失败后执行的方法，res是接收的ajax响应内容
console.log(res);
// 执行生成图片上传插件的方法, 第一个参数是上面提到的准备生成组件的div选择器，第二个参数是设置的组件信息，执行方法后返回一个函数指针，指向执行上传功能的函数，通过把执行上传功能的函数暴露出来，用户就可以自己控制何时上传图片了。
var upload = tinyImgUpload('#upload', options);
1.2 代码设计
我们需要思考用户如何引入我们的插件代码。
插件代码应该分为两个文件，一个CSS文件（tinyImgUpload.css），用于定义组件的基本样式，此外用户可以根据自己的想法自己DIY样式，另一个是控制功能逻辑的js文件（tinyImgUpload.js）。用户引入这两个文件后，就可以实现图片上传组件了。
2. 具体实现
具体实现的时候，主要涉及到两个地方，一个是读取本地文件，实现图片上传前可以预览的功能，一个是图片上传功能。
2.1 读取本地文件实现预览
这里用到了html5的File API，使用这个API可以在客户端验证上传的文件类型，限制文件大小，当然，在这里我们主要用到FileReader接口来读取文件，Filereader.readAsDataURL()返回的事件对象的result属性就是将文件编码为base64的数据地址，类似下面这样的，把他赋值给src属性，图片就显示出来了。
具体代码如下，完整代码可以从这里下载（tinyImgUpload.js ）
// 预览图片
//处理input选择的图片
function handleFileSelect(evt) {
var files = evt.target.
for(var i=0, f=files[i];i++){
// 过滤掉非图片类型文件
if(!f.type.match('image.*')){
// 过滤掉重复上传的图片
for(var j=0; j&(ele.files). j++){
if((ele.files)[j].name == f.name){
// 图片文件绑定到容器元素上
ele.files.push(f);
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement('div');
oDiv.className = 'img-thumb img-item';
// 向图片容器里添加元素
oDiv.innerHTML = '&img class=&thumb-icon& src=&'+e.target.result+'& /&'+
'&a href=&javscript:;& class=&img-remove&&x&/a&'
ele.insertBefore(oDiv, addBtn);
reader.readAsDataURL(f);
// input#img-file-input是一个隐藏的上传图片的input控件，当选择图片的时候会触发change事件
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);
2.2 上传图片
2.2.1 准备文件对象
上传文件之前，我们需要考虑如何保存用户已经选择的文件对象，由于用户可能多次选择，也可能在上传之前又删除了几个图片，所以需要有一个地方实时保存图片信息，并且要和预览的图片保持同步，预览显示有哪几张图片，这个地方就存储几张图片。我采用的方式是将文件信息组装成一个数组，然后绑定到组件元素（#img-container）的自定义属性上，上面代码中的“ele.files.push(f)”做的就是这件事。
2.2.2 文件对象我们准备好后，下一步就是上传了
ajax是不能直接上传文件对象的，我们可以通过FormData对象，FormData是XMLHttpRequest Level 2添加的一个新接口，使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest异步发送这个&表单&。具体代码如下。
// 上传图片
function uploadImg() {
var xhr = new XMLHttpRequest();
var formData = new FormData();
for(var i=0, f=ele.files[i]; i++){
formData.append('files', f);
xhr.onreadystatechange = function (e) {
if(xhr.readyState == 4){
if(xhr.status == 200){
options.onSuccess(xhr.responseText);
options.onFailure(xhr.responseText);
xhr.open('POST', options.path, true);
xhr.send(formData);
2.3 设置样式
我们写了一个基本的布局样式作为默认样式，用户可以根据自己的需求进行DIY。这里是完整的样式文件（tinyImgUpload.css ）。
基本的效果图如下。
如果我们想触发上传图片，可以把tinyImgUpload('#upload', options)返回的upload方法绑定到一个按钮上，监听点击事件。
&button class=&submit&&submit&/button&
document.getElementsByClassName('submit')[0].onclick = function (e) {
这样当我点击图片的时候，图片就会上传，交给服务器端处理了。
服务器接收的图片
为了测试图片上传好不好用，我自己搭建了一个图片接收的服务器，使用的是node.js，通过multer实现，如果大家感兴趣可以点击这里。
图片上传的关键部分就是如何读取本地文件实现预览，以及通过FormData对象构造一个表单对象实现ajax异步上传文件。目前这个插件的功能还不够完善，我把它放到了Github上（/gitwd/tinyImgUpload），后续会慢慢优化，欢迎大家提出宝贵意见。
4 参考目录
/en/tutorials/file/dndfiles/
http://codecloud.net/9276.html
/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/
https://cnodejs.org/topic/50ce2bbb637ffaf
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12325次
排名：千里之外
原创：34篇
转载：157篇
(151)(19)(16)(5)js前端实现图片懒加载(lazyload)的两种方式
js前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
关于各种宽高：
页可见区域宽： document.body.clientW
网页可见区域高： document.body.clientH
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollW
网页正文全文高： document.body.scrollH
网页被卷去的高： document.body.scrollT
网页被卷去的左： document.body.scrollL
网页正文部分上： window.screenT
网页正文部分左： window.screenL
屏幕分辨率的高： window.screen.
屏幕分辨率的宽： window.screen.
屏幕可用工作区高度： window.screen.availH
jqueryLazyload方式
下载地址：/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js
&section class="module-section" id="container"&
&img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/&
&/section&
require.config({
baseUrl : "/static",
jquery:'component/jquery/jquery-3.1.0.min'
jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
jqueryLazyload: {
deps: ['jquery'],
exports: '$'
'jqueryLazyload'
function($){
$(document).ready(function() {
$("img.lazy-load").lazyload({
　　　　　　　　　　effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
　　　　　　　　　　threshold : 180, //预加载，在图片距离屏幕180px时提前载入
　　　　　　　　　　event: 'click', // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
　　　　　　　　　　container: $("#container"), // 指定对某容器中的图片实现效果
　　　　　　　　　　failure_limit：2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
　　　　　　　　});
　　　　　　});
为了代码可读性，属性值我都写好了注释。值得注意的是预制图片属性为data-original，并且最好是给予初始高宽占位，以免影响布局，当然这里为了演示我是写死的640x480，如果是响应式页面，高宽需要动态计算。
echo.js方式
在前面“前端知识的一些总结”的博文中，介绍了一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去！
下载地址：/helijun/helijun/tree/master/plugin/echo
　　.demo img {
　　　　width: 736
　　　　height: 490
　　　　background: url(images/loading.gif) 50% no-}
&div class="demo"&
&img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"&
&script src="js/echo.min.js"&&/script&
Echo.init({
offset: 0,//离可视区域多少像素的图片可以被加载
　　 throttle: 0 //图片延时多少毫秒加载
说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
两者都非常简单，实现思路是一样的，只是jquerylazyload多几个属性。其实常用的echo就足够了，并且完全可以集成到自己项目中的公共js中，图片懒加载是相当常见且简单实用的功能，如果你的项目中还是傻瓜式的一次性全部加载，那么请花20分钟优化下~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
[js前端实现图片懒加载(lazyload)的两种方式]相关的文章
【JavaScript】图文推荐