文件拖拽——将文件拖到网页中显示

文件拖拽——将文件拖到网页中显示

---

• ondragenter-拖拽文件到里面
• ondragleave-拖拽文件离开
• ondragover-拖拽文件悬停
• obj.ondrop拖拽文件松手

拖拽事件通过var oFile=ev.dataTransfer.files[0]来访问和获取

文件

        var oDiv = document.getElementsByTagName('div')[0];
	var timer = null;
	window.ondragover=function(){
		clearTimeout(timer)
		oDiv.style.display='block';	
		timer = setTimeout(function(){
			oDiv.style.display='none';	
		},500)
	};
	oDiv.ondragenter=function(){
		this.innerHTML='释放鼠标';	
	};
	oDiv.ondragleave=function(){
		this.innerHTML='将文件拖拽至此';	
	};

效果

文件信息 

                oDiv.ondragover=function(){
				return false;
			}
	
		oDiv.ondrop=function(ev){
			//文件对象
			var oFile=ev.dataTransfer.files[0];
			//alert(oFile.name); 文件名称
			//alert(oFile.size); 文件大小
			//alert(oFile.type); 文件类型
			//alert(aFile.length); 文件个数 必须是一组文件
			
			//alert(oFile.lastModifiedDate);//最后修改时间
			
			//获取文件信息
			
			return false;	
		};

文件读取

window.onload = function(){
			var oBtn = document.querySelectorAll('input')[0];
			oBtn.onchange = function(ev){
				var oEvent = ev||event;
				var oFile=oEvent.srcElement.files[0];
				// 	alert(oFile.name)
				// 	alert(oFile.size)
				// 	alert(oFile.type)
				var reader=new FileReader();
				//以base64格式上传文件   必须写
				reader.readAsDataURL(oFile);
				
				reader.onloadend = function(){
					alert('上传完成！')
				}
				reader.onloadstart = function(){
					alert('上传开始')
				}
				reader.onerror = function(){
					alert('上传失败')
				}
				reader.onprogress = function(){
					console.log(1)
				}
				
			}

		}

---

图片

html代码<div id="container"></div>

    /*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
    document.ondragover = function (e) {
        e.preventDefault();  //只有在ondragover中阻止默认行为才能触发 ondrop 而不是   ondragleave
    };
    document.ondrop = function (e) {
        e.preventDefault();  //阻止 document.ondrop的默认行为  *** 在新窗口中打开拖进的图片
    };
    /*拖拽的源对象----- 客户端的一张图片 */
    /*拖拽目标对象-----div#container  若图片释放在此元素上方，则需要在其中显示*/
    container.ondragover = function (e) {
        e.preventDefault();
    };
    container.ondrop = function (e) {
        console.log(e.dataTransfer);
		//        chrome 此处的显示有误
        var list = e.dataTransfer.files;
        for (var i = 0; i < list.length; i++) {
            var f = list[i];
		//            console.log(f);
            reader(f);
		//            读取指定文件的内容 作为“数据URL”
		//            reader.readAsDataURL(f);
		//            当客户端文件读取完成 触发onload事件
        }
    };
    function reader(f) {
        var reader = new FileReader();
        reader.readAsDataURL(f);
        reader.onload = function () {
		//            console.log(reader.result);
            var img = new Image();
            img.src = reader.result;
            container.appendChild(img);
 
        }
    }

效果