JavaScript拖拽,点击上传文件组件封装

遇到一个拖拽上传图片的需求,研究了一下功能,以共后续学习使用,用原生写了一个小组件!
index.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload with Progress Bar | CodingNepaltitle>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
head>
<body>
  <div class="wrapper" id="draged">
    <header>File Uploader JavaScriptheader>
    <form action="#">
      <input class="file-input" type="file" name="file" hidden multiple>
      <i class="fas fa-cloud-upload-alt">i>
      <p class="hint">
		Browse File to Upload<br>
		Or drag it here
	  p>
    form>
    <section class="progress-area">section>
    <section class="uploaded-area">section>
	<div class="textPreread" onclick="closeText()">
		<div id="content">div>
	div>
  div>
	
	<script>
		const form = document.querySelector("form"),
		draged = document.getElementById('draged')
		fileInput = document.querySelector(".file-input"),
		progressArea = document.querySelector(".progress-area"),
		uploadedArea = document.querySelector(".uploaded-area");
		// form click event
		form.addEventListener("click", () =>{
		  fileInput.click();
		});
		fileInput.onchange = ({target})=>{
		  let file = target.files
		  console.log(file);
		  [...file].forEach(item=>{
				Preview(item)
		  })
		}
		//拖拽结束事件
		draged.addEventListener('dragover',handleDrageover)
		function handleDrageover(e){
			// 阻止默认事件。不要让浏览器默认事件来干扰。拖拽操作
			e.preventDefault()
			draged.classList.add('dragover')
		}
		// 拖拽离开事件
		draged.addEventListener('dragleave',handleDragLeave)
		function handleDragLeave(e){
			e.preventDefault()
			draged.classList.remove('dragover')
		}
		// 拖拽释放
		draged.addEventListener('drop',handleDrop)
		function handleDrop(e){
			e.preventDefault()
			// 将dom元素拖拽进可放置区域
			// const draggedId = e.dataTransfer.getData('text/plain')  //标注: 拖拽dom元素
			// draged.appendChild(document.getElementById('drag'))    //标注: 拖拽dom元素
			// draged.classList.add('dropSucess')
			// console.log(...e.dataTransfer.items)
			// 拖拽也支持外部拖拽文件,图片进来,可以在该事件中监听,
			// 如果是拖拽文件需要注释上面 “标注:拖拽dom元素” 两行代码
			// 遍历e.dataTransfer.items 属性去做操作
			// ...e.dataTransfer.items 可能为空,做一个判空处理
			if([...e.dataTransfer.items]){
				// 拖拽文件,解构成数组,如果是多个需要遍历,所以调用forEach
				[...e.dataTransfer.items].forEach(item=>{
					
					console.log(item,'000');
					// 如果拖拽进来的是文件夹
					let Directory = item.webkitGetAsEntry()
					if(Directory.isDirectory) {
						alert('请尝试压缩后上传')
					}
					// console.log(Directory);
					// 通过kind属性判断拖拽进来的是不是文件
					if(item.kind === 'file') {
						const file = item.getAsFile()
						//createPreview 生成预览,比如判断图片
						Preview(file)
					}
				})
			}	
		}
		// 图片处理
		function Preview(file){
			// 如果是图片类型的文件
			if(file.type.startsWith('image')){
				// 创建一个图片元素
				const image = document.createElement('img')
				// 根据文件对象创建一个ObjectURL,用作src属性
				image.src = URL.createObjectURL(file)
				// 图片加载成功过后,ObjectURL就没有用了,就回收这个ObjectURL
				file.onload = function(){
					URL.revokeObjectURL(this.src)
				}
				// 把图片追加到可放置区域,及直接将图片显示到浏览器。
				// draged.appendChild(image)
				// 如果只显示名字和图片大小
				console.log(file);
				console.log(file.name,Math.ceil(file.size/1024)+'kb');
				const fileName = document.createElement('div')
				// 注意:模板字符串中添加点击事件要带引号
				fileName.innerHTML = `
				

${image.src}')" class='name' >${file.name}

体积:${Math.ceil(file.size/1024)}kb
`
fileName.classList.add('fileName') uploadedArea.appendChild(fileName) } else if(file.type.startsWith('application') || file.type.startsWith('audio')|| file.type.startsWith('video')){ const fileName = document.createElement('div') fileName.innerHTML = `

${file.name}

体积:${Math.ceil(file.size/1024)}kb
`
fileName.classList.add('fileName') uploadedArea.appendChild(fileName) } else if(file.type.startsWith('text')){ new Promise(resolve=>{ let co = '' let reader = new FileReader reader.readAsText(file,'utf-8') reader.onload = (evt)=>{ // 读取txt文件 let data = evt.target.result resolve(data) } }).then( res=>{ const fileName = document.createElement('div') // 如果使用模板字符串传参,会因为特殊字符,导致传参发生位置错误 let on = {} on.text = res fileName.innerHTML = `

${file.name}

体积:${Math.ceil(file.size/1024)}kb
`
fileName.classList.add('fileName') fileName.onclick = function(){ showText.call(this,on) } uploadedArea.appendChild(fileName) // 这两种写法都会立即执行预览事件,并且只执行一次 // fileName.setAttribute('onclick',showText(on)) // fileName.addEventListener('onclick',showText(on)) }) } else { alert('未知文件格式') } } function showText(data){ // console.log(data,'data'); let text = document.getElementById('content') text.innerText = data.text let textFater = document.getElementsByClassName('textPreread')[0] textFater.classList.add('textPrereadShow') } function closeText(){ // 点击任意位置关闭预览txt let textFater = document.getElementsByClassName('textPreread')[0] textFater.classList.remove('textPrereadShow') } // 图片预览 function showImg(img){ let obj = { urls: [img], current: img } previewImage.start(obj) }
script> <script src="previewImage.js">script> body> html>

style.css

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #6990F2;
}
#draged img {
				width: 50%;
				height: 50%;
				object-fit: contain;
				margin-top: 20px;
			}
			.dragover{
				border: 4px orangered;
			}
			.dropSucess{
				border: 4px green;
			}
::selection{
  color: #fff;
  background: #6990F2;
}
.wrapper{
  width: 430px;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
}
.wrapper header{
  color: #6990F2;
  font-size: 27px;
  font-weight: 600;
  text-align: center;
}
.wrapper form{
  height: 167px;
  display: flex;
  cursor: pointer;
  margin: 30px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #6990F2;
}
form :where(i, p){
  color: #6990F2;
}
form i{
  font-size: 50px;
}
form p{
  margin-top: 15px;
  font-size: 16px;
}

section .row{
  margin-bottom: 10px;
  background: #E9F0FF;
  list-style: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section .row i{
  color: #6990F2;
  font-size: 30px;
}
section .details span{
  font-size: 14px;
}
.progress-area .row .content{
  width: 100%;
  margin-left: 15px;
}
.progress-area .details{
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  justify-content: space-between;
}
.progress-area .content .progress-bar{
  height: 6px;
  width: 100%;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress{
  height: 100%;
  width: 0%;
  background: #6990F2;
  border-radius: inherit;
}
.uploaded-area{
  display: flex;
  flex-direction: column;
  max-height: 232px;
  overflow-y: scroll;
}
.uploaded-area.onprogress{
  max-height: 150px;
}
.uploaded-area::-webkit-scrollbar{
  width: 0px;
}
.uploaded-area .row .content{
  display: flex;
  align-items: center;
}
.uploaded-area .row .details{
  display: flex;
  margin-left: 15px;
  flex-direction: column;
}
.uploaded-area .row .details .size{
  color: #404040;
  font-size: 11px;
}
.uploaded-area i.fa-check{
  font-size: 16px;
}
.fileName{
	color: #6990F2;
	cursor: pointer;
	position: relative;
	display: flex;
	font-size: 14px;
}
.name {
	max-width: 240px;
	height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	text-align: justify;
	-webkit-box-orient: vertical;
}
.fileName span{
	margin-left: 30px;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow:hidden; 
}
.hint{
	text-align: center;
}
.textPreread{
	position: fixed;
	display: flex;
	visibility: hidden;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.textPrereadShow {
	visibility: visible;
}
.textPreread #content{
	overflow: auto;
	height: 500px;
	font-size: 12px;
	width: 480px;
	background-color: #fff;
}

#content::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}

标题 网上的一个图片预功能,bug未知,不需要预览功能,可忽略

previewImage.js

(function( global, factory ) {
    //For CommonJS and CommonJS-like
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "previewImage requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

// Pass this if window is not defined yet
}(typeof window !== "undefined" ? window : this, function(window){
    var $ = {};
    var style = "#__previewImage-container{padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);-ms-touch-action:none;touch-action:none;-webkit-touch-action:none;line-height:100vh;background: rgba(0,0,0,0.5);min-width:100vw;min-height:100vh;position:fixed;overflow:hidden;top:0;left:0;bottom:0;right:0;z-index: 2147483647;transition:transform .3s;-ms-transition:transform .3s;-moz-transition:transform .3s;-webkit-transition:transform .3s;-o-transition:transform .3s;transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);-o-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0)}#__previewImage-container .previewImage-text{position:absolute;width: 50px;height: 30px;top:.6em;text-align:center;font-size:15px;line-height:30px;color:#fff;z-index:10;padding: 0.2em 0.4em;background-color: rgba(0,0,0,0.5);border-radius: 12px;letter-spacing: 0;right:.8em}#__previewImage-container .previewImage-text .previewImage-text-index{font-size: 18px;}#__previewImage-container .previewImage-box{height:100vh;display:flex;justify-content: center;}#__previewImage-container .previewImage-box .previewImage-item{width:50vw;height:100vh;transform: scale(0.9);text-align:center;background:url() no-repeat center/auto}#__previewImage-container .previewImage-box .previewImage-item.previewImage-nobackground{background:none;}#__previewImage-container .previewImage-box .previewImage-item .previewImage-image{vertical-align:middle;width:100%}";
    $.isArray = function(value) {
      return Object.prototype.toString.call(value) == '[object Array]';
    }
    /**
     * get multiple elements
     * @public
     */
    $.all = function(selector, contextElement) {
      var nodeList,
        list = [];
      if (contextElement) {
        nodeList = contextElement.querySelectorAll(selector);
      } else {
        nodeList = document.querySelectorAll(selector);
      }
      if (nodeList && nodeList.length > 0) {
        list = Array.prototype.slice.call(nodeList);
      }
      return list;
    }

    /**
     * delegate an event to a parent element
     * @public
     * @param  array     $el        parent element
     * @param  string    eventType  name of the event
     * @param  string    selector   target's selector
     * @param  function  fn
     */
    $.delegate = function($el, eventType, selector, fn) {
      if (!$el) { return; }
      $el.addEventListener(eventType, function(e) {
        var targets = $.all(selector, $el);
        if (!targets) {
          return;
        }
        for (var i=0; i<targets.length; i++) {
          var $node = e.target;
          while ($node) {
            if ($node == targets[i]) {
              fn.call($node, e);
              break;
            }
            $node = $node.parentNode;
            if ($node == $el) {
              break;
            }
          }
        }
      }, false);
    };
    var _previewImage = function(){
        this.winw = window.innerWidth||document.body.clientWidth;  //窗口的宽度
        this.winh = window.innerHeight||document.body.clientHeight; //窗口的高度
        this.originWinw = this.winw;    //存储源窗口的宽度
        this.originWinh = this.winh;    //存储源窗口的高度
        this.marginRight = 15;  //图片之间的间隔->previewImage-item的margin-right
        this.imageChageMoveX = this.marginRight+this.winw;  //图片切换容器的x位移量
        this.imageChageNeedX = Math.floor(this.winw*(0.5)); //图片切换所需x位移量
        this.cssprefix = ["","webkit","Moz","ms","o"]; //css前缀
        this.version = '1.0.3'; //版本号
        this.imgLoadCache = new Object();  //图片加载状态储存 key=md5(img.src),value={isload:true,elem:img};
        this.scale = 1;     //默认图片放大倍数
        this.maxScale = 4;  //图片默认最大放大倍数
        this.maxOverScale = 6;  //图片放大倍数最大可达到
        // this.minScale = 0.5; //图片最小可放大倍数
        this.openTime = 0.3;    //打开图片浏览动画时间
        this.slipTime = 0.6;    //图片切换时间
        this.maxOverWidthPercent = 0.5; //边界图片最大可拉取宽度,屏幕宽度的百分比
        this.$box = false;  //图片容器加载状态
        this.isPreview = false; //是否正在预览图片
        var $style = document.createElement('style');   //样式标签
        $style.innerText = style;   //加载样式
        $style.type = 'text/css';
        this.$container = document.createElement('div');    //加载容器
        this.$container.id = '__previewImage-container';    //容器加上id
        this.$container.style.width = this.winw+'px';   //加上宽度
        this.$container.style.height = this.winh+'px';  //加上高度
        document.body.appendChild(this.$container);     //插入容器到body
        document.head.appendChild($style);              //插入样式到head
        this.bind();    //绑定事件
    }
    _previewImage.prototype.start = function(obj){  //可优化 todo
        var urls = obj.urls;    //待预览的图片列表
        var current = obj.current;  //当前预览的图片地址

        this.$container.innerHTML = ''; //清空容器
        if(!urls||!$.isArray(urls)||urls.length==0){    //参数检测
            throw new Error("urls must be a Array and the minimum length more than zero");
            return
        }
        if(!current){   //参数检测
            this.index = 0; 
            console.warn("current is empty,it will be the first value of urls!");
        }else{
            var index = urls.indexOf(current);
            if(index<0){
                index = 0;
                console.warn("current isnot on urls,it will be the first value of urls!");
            }
            this.index = index; //当前图片序号
        }
        this.urls = urls;   //所有图片url列表
        this.maxLen = urls.length-1;  //最大图片数 0<=index<=maxLen
        this.cIndex = this.maxLen+1;    //containerIndex
        this.bIndex = this.maxLen+2;    //boxIndex
        this.imgStatusCache = new Object(); //图片信息储存
        this.render();                //渲染预览模块
    }

    _previewImage.prototype.render = function(){
        var _this = this;
        if(this.$box===false){  //加载图片容器
            var box = document.createElement('div');
            box.className += 'previewImage-box';
            this.$box = box; //更新图片容器
        }else{
            this.$box.innerHTML = '';  //已有图片容器-清空容器
        }
        var text = document.createElement('div');   //当前张数/总张数--文本标签
        this.$text = text;
        this.$text.className += 'previewImage-text';
        this.$text.innerHTML = ""+(this.index+1)+"/"+(this.maxLen+1);    //当前第几张/图片总数
        this.container = this.imgStatusCache[this.cIndex] = {elem:this.$container,x:this.winw,y:0,m:0,my:0,scale:1,scalem:1}; //存储容器状态
        this.box = this.imgStatusCache[this.bIndex] = {elem:this.$box,x:0,y:0,m:0,my:0,scale:1,scalem:1};   //存储图片容器状态
        this.urls.forEach(function(v,i){    //图片
            var div = document.createElement('div');
            var hash = window.md5?md5(v+i):v+i;
            var img;
            var imgCache = _this.imgLoadCache[hash];
            //缓存图片&&读取缓存图片
            if(imgCache&&imgCache.isload){    //图片已加载--使用缓存
                img = imgCache.elem;
                div.className+=" previewImage-nobackground";
            }else{  //图片未加载--加载图片,加入缓存
                img = new Image();
                img.className += 'previewImage-image';
                _this.imgLoadCache[hash] = {isload:false,elem:img};
                if(i == _this.index){   //将当前需要预览的图片加载
                    img.src = v;
                    img.onload = function(){
                        div.className+=" previewImage-nobackground";
                        _this.imgLoadCache[hash].isload = true;
                    }
                }
            }
            _this.imgStatusCache[i] = {hash:hash,x:0,m:0,y:0,my:0,scale:_this.scale,scalem:1};  //修改缓存状态
            // img.setAttribute("data-index",i);  //未使用
            div.className+=' previewImage-item';
            div.appendChild(img);
            _this.$box.appendChild(div); //将图片div加入 图片容器
        })
        
        this.$container.appendChild(this.$box);    //加载图片容器
        this.$container.appendChild(this.$text);    //加载图片张数提示
        var offsetX = -this.imageChageMoveX*this.index;  //计算显示当前图片,容器所需偏移量
        this.box.x = offsetX;   //将图片容器所需偏移量,存入状态缓存器
        this.container.x = 0;   //显示预览模块
        this.$container.style.display = "block";
        setTimeout(function(){
            _this.translateScale(_this.bIndex,0);
            _this.translateScale(_this.cIndex,_this.openTime);
            _this.isPreview = true;
        },50);
    }

    _previewImage.prototype.bind = function(){
        var $container = this.$container;
        var _this = this;
        var closePreview = function(){
            _this.closePreview.call(_this);
        }
        var touchStartFun = function(){
            _this.touchStartFun.call(_this);
        }
        var touchMoveFun = function(){
            _this.touchMoveFun.call(_this);
        }
        var touchEndFun = function(){
            _this.touchEndFun.call(_this);
        }

        // var orientationChangeFun = function(){
        //     var angle = screen.orientation.angle;
        //     var _this = this;
        //     if(angle==90||angle==180){
        //         _this.winw = _this.originWinh;
        //         _this.winh = _this.originWinw;
        //     }else{
        //         _this.winw = _this.originWinw;
        //         _this.winh = _this.originWinh;
        //     }
        //     _this.$container.style.width = _this.winw+'px';   //改变宽度
        //     _this.$container.style.height = _this.winh+'px';  //改变高度
        //     _this.imageChageMoveX = _this.marginRight+_this.winw;
        //     var offsetX = -_this.imageChageMoveX*_this.index;  //计算显示当前图片,容器所需偏移量
        //     try{
        //         _this.box.x = offsetX;   //将图片容器所需偏移量,存入状态缓存器
        //         _this.translateScale(_this.bIndex,0);
        //     }catch(e){}
        // }.bind(this);

        var reSizeFun = function(){
            var _this = this;
            _this.winw = window.innerWidth||document.body.clientWidth;  //窗口的宽度
            _this.winh = window.innerHeight||document.body.clientHeight; //窗口的高度
            _this.originWinw = _this.winw;    //存储源窗口的宽度
            _this.originWinh = _this.winh;    //存储源窗口的高度
            _this.$container.style.width = _this.winw+'px';   //改变宽度
            _this.$container.style.height = _this.winh+'px';  //改变高度
            _this.imageChageMoveX = _this.marginRight+_this.winw;
            var offsetX = -_this.imageChageMoveX*_this.index;  //计算显示当前图片,容器所需偏移量
            try{
                _this.box.x = offsetX;   //将图片容器所需偏移量,存入状态缓存器
                _this.translateScale(_this.bIndex,0);
            }catch(e){}
        }.bind(this);

        // window.addEventListener("orientationchange",orientationChangeFun,false);
        window.addEventListener("resize",reSizeFun,false);
        $.delegate($container,'click','.previewImage-item',closePreview);
        $.delegate($container,'touchstart','.previewImage-item',touchStartFun);
        $.delegate($container,'touchmove','.previewImage-item',touchMoveFun);
        $.delegate($container,'touchend','.previewImage-item',touchEndFun);
        $.delegate($container,'touchcancel','.previewImage-item',touchEndFun);
    }

    _previewImage.prototype.closePreview = function(){
        var _this = this;
        this.imgStatusCache[this.cIndex].x = this.winw;
        this.translateScale(this.cIndex,this.openTime);
        this.imgStatusRewrite();
        this.translateScale(this.index,this.slipTime);
        setTimeout(function(){
            _this.$container.style.display = "none";
        },this.slipTime*1000);
        _this.isPreview = false;
    }

    _previewImage.prototype.touchStartFun = function(imgitem){
        this.ts = this.getTouches();
        this.allowMove = true;  //行为标记
        this.statusX = 0; //标记X轴位移状态
        this.statusY = 0; //标记Y轴位移状态
    }

    _previewImage.prototype.touchMoveFun = function(imgitem){
        this.tm = this.getTouches();
        var tm = this.tm;
        var ts = this.ts;
        this.moveAction(ts,tm);
    }

    _previewImage.prototype.touchEndFun = function(imgitem){
        var $container = this.$container;
        this.te = this.getTouches();
        this.endAction(this.ts,this.te);
    }

    _previewImage.prototype.moveAction = function(ts,tm){
        if(!this.allowMove){
            return
        }
        var imgStatus = this.getIndexImage();
        var maxWidth = this.winw*0.3/imgStatus.scale;
        var x0_offset = tm.x0 - ts.x0;
        var y0_offset = tm.y0 - ts.y0;
        if(Math.abs(y0_offset)>0){  //阻止Ios系统的浏览器环境上下滑动
            event.preventDefault();
        }
        var imgPositionX = imgStatus.x+x0_offset;
        var imgPositionY = imgStatus.y+y0_offset;
        var allow = this.getAllow(this.index);
        var allowX = this.allowX = allow.x;
        var allowY = this.allowY = allow.y0;
        if(x0_offset<=0){  //边界
            this.allowX = -allowX;
        }
        // if(y0_offset<=0){   //边界
        //     allowY = this.allowY = allow.y1;
        // }
        // 是否允许在y轴方向滑动 imgPositionY 将有关imgPositionY 已注释,禁止y轴方向滑动
        if(tm.length==1){   //单手指(图片位移)
            if(imgStatus.scale>1){ 
                // Y方向位移
                if(imgPositionY>=allow.y0 && imgPositionY){  //超过窗口上边界
                    this.statusY = 1;
                    var overY = imgPositionY - allow.y0;
                    imgStatus.my = allow.y0-imgStatus.y+this.getSlowlyNum(overY,maxWidth);
                }else if(imgPositionY<=allow.y1){ //超过窗口下边界
                    this.statusY = 1;
                    var overY = imgPositionY - allow.y1;
                    imgStatus.my = allow.y1-imgStatus.y+this.getSlowlyNum(overY,maxWidth);
                }else{
                    this.statusY = 2;
                    imgStatus.my = y0_offset;
                }
                
                //X方向位移
                if(x0_offset<0&&imgStatus.x<=-allowX){ //左滑->初始状态到达或超过右边界->图片平滑移动到达条件-切换下一张
                    this.statusX = 1;
                    this.box.m = x0_offset; //更新位移信息
                    if(this.index==this.maxLen){ //box到达右边界
                        this.box.m = this.getSlowlyNum(x0_offset);  //阻尼效果
                    }
                    this.translateScale(this.bIndex,0);
                    this.translateScale(this.index,0);
                }else if(x0_offset>0&&imgStatus.x>=allowX){    //右滑->初始状态到达或超过左边界->图片平滑移动到达条件-切换上一张
                    this.statusX = 2;
                    this.box.m = x0_offset;
                    if(this.index==0){ //box到达左边界
                        this.box.m = this.getSlowlyNum(x0_offset);  //阻尼效果
                    }
                    this.translateScale(this.bIndex,0);
                    this.translateScale(this.index,0);
                }else{  //初始状态未到边界->图片平滑移动到边界->阻尼移动
                    if(x0_offset==0){
                        return
                    }
                    this.statusX = 3;
                    imgStatus.m = x0_offset;
                    if(imgPositionX>=allowX){   //右滑到达左边界
                        this.statusX = 4;
                        var overX = imgPositionX - allowX;
                        imgStatus.m = allowX-imgStatus.x+this.getSlowlyNum(overX,maxWidth);
                    }
                    if(imgPositionX<=-allowX){  //左滑到达右边界
                        this.statusX = 4;
                        var overX = imgPositionX + allowX;
                        imgStatus.m = -allowX-imgStatus.x+this.getSlowlyNum(overX,maxWidth);
                    }
                    this.translateScale(this.index,0);
                }
            }else{  //scale == 1;
                if(Math.abs(y0_offset)>5&&this.statusX != 5){  //长图片处理
                    var $img = this.getJqElem(this.index);
                    var imgBottom = $img.height-this.winh;
                    // if(1){
                    if(y0_offset>0&&imgPositionY>0){
                        // 是否允许y轴方向移动
                        // this.statusX = 7;
                        // this.allowY = 0;
                        // imgStatus.my = - imgStatus.y + this.getSlowlyNum(imgPositionY,maxWidth);
                    }else if(y0_offset<0&&imgPositionY<-imgBottom){
                        // this.statusX = 7;
                        // if($img.height>this.winh){
                        //     var overY = imgPositionY + imgBottom;
                        //     this.allowY = -imgBottom;
                        //     imgStatus.my = -imgBottom - imgStatus.y + this.getSlowlyNum(overY,maxWidth);
                        // }else{
                        //     this.allowY = 0;
                        //     imgStatus.my = - imgStatus.y + this.getSlowlyNum(imgPositionY,maxWidth);
                        // }
                    }else{
                        this.statusX = 6;
                        imgStatus.my = y0_offset;
                    }
                    this.translateScale(this.index,0);
                }else{
                    if(this.statusX == 6){
                        return
                    }
                    this.statusX = 5;
                    if((this.index==0&&x0_offset>0)||(this.index==this.maxLen&&x0_offset<0)){ //box到达左右边界
                        this.box.m = this.getSlowlyNum(x0_offset);
                    }else{
                        this.box.m = x0_offset;
                    }
                    this.translateScale(this.bIndex,0);
                }
            }
        }else{  //多手指(图片放大缩小)
            var scalem = this.getScale(ts,tm)
            var scale = scalem*imgStatus.scale;
            if(scale>=this.maxScale){  //达到最大放大倍数
                var over = scale - this.maxScale;
                scale = this.maxScale+this.getSlowlyNum(over,this.maxOverScale);
                scalem = scale/imgStatus.scale;
            }
            imgStatus.scalem = scalem;
            this.translateScale(this.index,0);
        }
    }

    _previewImage.prototype.endAction = function(ts,te){
        var imgStatus = this.getIndexImage();
        var x0_offset = te.x0 - ts.x0;
        var y0_offset = te.y0 - ts.y0;
        var time = te.time - ts.time;
        var slipTime = 0;
        this.allowMove = false; //结束所有行为
        if(ts.length==1){      //单手指(图片位移)
            if(Math.abs(x0_offset)>10){ //防止误触关闭看图
                event.preventDefault();
            }
            switch(this.statusY){
                case 1:
                    imgStatus.y = this.allowY;
                    imgStatus.my = 0;
                    slipTime = this.slipTime;
                break
                case 2:
                    imgStatus.y = imgStatus.y+imgStatus.my;
                    imgStatus.my = 0;
                break
            }

            switch(this.statusX){
                case 1: //左滑->初始状态到达或超过右边界->图片平滑移动到达条件-切换下一图
                    if(this.index!=this.maxLen&&(x0_offset<=-this.imageChageNeedX||(time<200&&x0_offset<-30))){    //下一图
                        this.changeIndex(1);
                    }else{
                        this.changeIndex(0);
                        if(slipTime!=0){
                            this.translateScale(this.index,slipTime);
                        }
                    }
                break
                case 2: //右滑->初始状态到达或超过左边界->图片平滑移动到达条件-切换上一图
                    if(this.index!=0&&(x0_offset>=this.imageChageNeedX||(time<200&&x0_offset>30))){ //上一图
                        this.changeIndex(-1);
                    }else{
                        this.changeIndex(0);
                        if(slipTime!=0){
                            this.translateScale(this.index,slipTime);
                        }
                    }
                break
                case 3: //scale>1,初始状态未到边界->图片平滑移动未到边界
                    imgStatus.x = imgStatus.x+imgStatus.m;
                    imgStatus.m = 0;
                    this.translateScale(this.index,slipTime);
                break
                case 4: //scale>1,初始状态未到边界->图片平滑移动到边界->阻尼移动
                    imgStatus.x = this.allowX;
                    imgStatus.m = 0;
                    slipTime = this.slipTime;
                    this.translateScale(this.index,slipTime);
                break
                case 5: //scale=1,box位移,图片切换
                    if(x0_offset>=this.imageChageNeedX||(time<200&&x0_offset>30)){    //上一图
                        this.changeIndex(-1);
                    }else if(x0_offset<=-this.imageChageNeedX||(time<200&&x0_offset<-30)){ //下一图
                        this.changeIndex(1);
                    }else{
                        this.changeIndex(0);
                    }
                break
                case 6: //scale=1,长图片
                    imgStatus.y = imgStatus.y+imgStatus.my;
                    imgStatus.my = 0;
                break
                case 7: //scale=1,长图片 到边界
                    imgStatus.y = this.allowY;
                    imgStatus.my = 0;
                    this.translateScale(this.index,this.slipTime);
                break
            }
        }else{  // 放大倍数问题
            event.preventDefault();

            var scale = imgStatus.scale*imgStatus.scalem;
            var $img = this.getJqElem(this.index);
            imgStatus.scale = scale;
            var allow = this.getAllow(this.index);

            if(imgStatus.x>allow.x){
                slipTime = this.slipTime; 
                imgStatus.x = allow.x;
            }else if(imgStatus.x<-allow.x){
                slipTime = this.slipTime;
                imgStatus.x = -allow.x;
            }

            if(imgStatus.y>allow.y0){
                slipTime = this.slipTime; 
                imgStatus.y = allow.y0;
            }else if(imgStatus.y<allow.y1){
                slipTime = this.slipTime; 
                imgStatus.y = allow.y1;
            }

            if($img.height*imgStatus.scale<=this.winh){
                imgStatus.y = 0;
            }

            if($img.width*imgStatus.scale<=this.winw){
                imgStatus.x = 0;
            }

            imgStatus.scalem = 1;
            if(scale>this.maxScale){     //倍数大于最大限制倍数
                imgStatus.scale = this.maxScale;
                slipTime = this.slipTime;
            }else if(scale<1){//倍数小于1
                this.imgStatusRewrite();
                slipTime = this.slipTime;
            }
            if(slipTime!=0){
                this.changeIndex(0);
                this.translateScale(this.index,slipTime);
            }
        }
    };

    _previewImage.prototype.getAllow = function(index){
        var $img = this.getJqElem(index);
        var imgStatus = this.getIndexImage(index);
        var allowX = Math.floor(($img.width*imgStatus.scale-this.winw)/(2*imgStatus.scale));
        var allowY0,allowY1;
        if($img.height*imgStatus.scale<=this.winh){
            allowY0 = 0;
            allowY1 = 0;
        }else if($img.height<=this.winh){
            allowY0 = Math.floor(($img.height*imgStatus.scale-this.winh)/(2*imgStatus.scale));
            allowY1 = -allowY0;
        }else{
            allowY0 = Math.floor($img.height*(imgStatus.scale-1)/(2*imgStatus.scale));
            allowY1 = -Math.floor(($img.height*(imgStatus.scale+1)-2*this.winh)/(2*imgStatus.scale));
        }
        return {
            x:allowX,
            y0:allowY0,
            y1:allowY1,
        };
    };

    _previewImage.prototype.getSlowlyNum = function(x,maxOver){
        var maxOver = maxOver||this.winw*this.maxOverWidthPercent;
        if(x<0){
            x = -x;
            return -(1-(x/(maxOver+x)))*x;
        }else{
            return (1-(x/(maxOver+x)))*x;
        }
    };

    _previewImage.prototype.getScale = function(ts,tm){
        var fingerRangeS = Math.sqrt(Math.pow((ts.x1 - ts.x0),2)+Math.pow((ts.y1-ts.y0),2)); //两手指的初始距离
        var fingerRangeM = Math.sqrt(Math.pow((tm.x1 - tm.x0),2)+Math.pow((tm.y1-tm.y0),2)); //两手指移动过程中的距离
        var range = fingerRangeM/fingerRangeS;
        return range;
    };

    _previewImage.prototype.imgStatusRewrite = function(index){
        var index = index===undefined?this.index:index;
        var imgStatus = this.imgStatusCache[index];
        imgStatus.x = 0;
        imgStatus.y = 0;
        imgStatus.m = 0;
        imgStatus.my = 0;
        imgStatus.scale = 1;
        imgStatus.scalem = 1;
        if(index!=this.index){
            this.translateScale(index,this.slipTime);
        }
    }

    _previewImage.prototype.changeIndex = function(x){
        var imgStatus = this.getIndexImage();
        var oldIndex = this.index;
        var _this = this;
        if(this.index==0&&x==-1){
            this.index = this.index;
        }else if(this.index==this.maxLen&&x==1){
            this.index = this.index;
        }else{
            this.index+=x;
            this.$text.innerHTML = ""+(this.index+1)+"/"+(this.maxLen+1);    //当前第几张/图片总数
            var hash = this.imgStatusCache[this.index].hash;
            var imgCache = this.imgLoadCache[hash];
            if(!imgCache.isload){    //图片未缓存则加载图片
                imgCache.elem.src = this.urls[this.index];
                imgCache.elem.onload = function(){
                    imgCache.elem.parentNode.className+=" previewImage-nobackground";
                    imgCache.isload = true;
                }
            }else{
                imgCache.elem.parentNode.className+=" previewImage-nobackground";
            }
        }
        this.box.x = -this.imageChageMoveX*this.index;
        this.box.m = 0;
        if(oldIndex!=this.index){
            this.imgStatusRewrite(oldIndex);
        }
        this.translateScale(this.bIndex,this.slipTime);
    }

    _previewImage.prototype.getIndexImage = function(index){
        var index = index==undefined?this.index:index;
        return  this.imgStatusCache[this.index];
    }

    _previewImage.prototype.translateScale = function (index,duration){
        var imgStatus = this.imgStatusCache[index];
        let $elem = this.getJqElem(index);
        var scale = imgStatus.scale*imgStatus.scalem;
        var offsetX = imgStatus.x+imgStatus.m;
        var offsetY = imgStatus.y+imgStatus.my;
        var tran_3d='scale3d('+scale+','+scale+',1) '+' translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)';
        // var tran_2d='scale('+scale+','+scale+') '+' translate(' + offsetX + 'px,' + offsetY +'px)';
        var transition = 'transform '+duration+'s ease-out';
        this.addCssPrefix($elem,'transition',transition);
        this.addCssPrefix($elem,'transform',tran_3d);
    }

    _previewImage.prototype.getJqElem = function(index){
        var $elem;
        var index = index==undefined?this.index:index;
        if(index<=this.maxLen){
            var hash = this.imgStatusCache[index].hash;
            var img = this.imgLoadCache[hash].elem;
            $elem = img;
        }else{
            var elem = this.imgStatusCache[index].elem;
            $elem = elem;
        }

        return $elem
    }
    /**
     * [addCssPrefix 增加css前缀]
     * @param {[elem]} elem  [element]
     * @param {[string]} prop  [css attribute]
     * @param {[string]} value [css value]
     */
    _previewImage.prototype.addCssPrefix = function(elem,prop,value){    //可以优化todo
        for(var i in this.cssprefix){
            var cssprefix = this.cssprefix[i];
            if(cssprefix===""){
                prop = prop.toLowerCase();
            }else{
                var len = prop.length;
                prop = prop.substr(0,1).toUpperCase()+prop.substr(1,len).toLowerCase()
            }
            if(document.body.style[prop]!==undefined){
                elem.style[prop] = value;
                return 
            }
        }
    }

    _previewImage.prototype.getTouches = function(e){
        var touches = event.touches.length>0?event.touches:event.changedTouches;
        var obj = {touches:touches,length:touches.length};
            obj.x0 = touches[0].pageX
            obj.y0 = touches[0].pageY;
            obj.time = new Date().getTime();
        if(touches.length>=2){
            obj.x1 = touches[0].pageX
            obj.y1 = touches[1].pageY
        }
        return obj;
    }
    window.previewImage = new _previewImage();
    // AMD loader
    if ( typeof define === "function" && define.amd ) {
        define([], function() {
            return previewImage;
        } );
    }

    return previewImage;
}));

你可能感兴趣的