html5 拖拽demo,一步步用HTML5动手写个图片拖拽上传预览组件

详情参考:一步步用HTML5动手写个图片上传预览组件

H5中拖拽事件有:

[ - ] DragDrop：拖放完成，也就是鼠标拖入对象并在拖放区域释放。

[ - ] DragEnter ：拖放进入，也就是鼠标拖放对象进入拖放区域。

[ - ] DragLeave：离开拖放区域。

[ - ] DragOver ：拖放对象悬浮于拖放区域，在拖放区域内移动时多次触发。

1.拖拽文件获取文件信息

.example {

padding: 10px;

border: 1px solid #ccc;

}

#drop_zone {

border: 2px dashed #bbb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 25px;

text-align: center;

font: 20pt bold 'Vollkorn';

color: #bbb;

}

将文件拖放到此处

function handleFileSelect(evt) {

evt.stopPropagation(); //阻止默认事件

evt.preventDefault(); //阻止默认事件

var files = evt.dataTransfer.files;//获取文件集

var output = [];

for(var i = 0, f; f = files[i]; i++) {

output.push('

', escape(f.name), ' (', f.type || 'n/a', ') - ',

f.size, ' bytes, last modified: ',

f.lastModifiedDate.toLocaleDateString(), '

');

}

document.getElementById('list').innerHTML = '

• ' + output.join('') + '

';

}

function handleDragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

var dropZone = document.getElementById('drop_zone');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

//body中阻止 拖拽事件防止拖拽错误

document.body.addEventListener('dragover', function(evt) {

evt.stopPropagation(); //阻止默认事件

evt.preventDefault(); //阻止默认事件

return false;

}, false);

document.body.addEventListener('drop', function(evt) {

evt.stopPropagation(); //阻止默认事件

evt.preventDefault(); //阻止默认事件

return false;

}, false);

2.限制文件大小与文件格式

.example {

padding: 10px;

border: 1px solid #ccc;

}

#drop_zone {

border: 2px dashed #bbb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 25px;

text-align: center;

font: 20pt bold 'Vollkorn';

color: #bbb;

}

将文件拖放到此处

function handleFileSelect(evt) {

evt.stopPropagation(); //阻止默认事件

evt.preventDefault(); //阻止默认事件

var files = evt.dataTransfer.files;//获取文件集

var output = [];

for(var i = 0, f; f = files[i]; i++) {

if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里

output.push('

', escape(f.name), ' (', f.type || 'n/a', ') - ',

f.size, ' bytes, last modified: ',

f.lastModifiedDate.toLocaleDateString(), '

');

}

}

document.getElementById('list').innerHTML = '

• ' + output.join('') + '

';

}

function handleDragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

}

var dropZone = document.getElementById('drop_zone');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

//body中阻止 拖拽事件防止拖拽错误

document.body.addEventListener('dragover', function(evt) {

evt.stopPropagation(); //阻止默认事件

evt.preventDefault(); //阻止默认事件

return false;

}, false);

document.body.addEventListener('drop', function(evt) {

evt.stopPropagation(); //阻止默认事件

evt.preventDefault(); //阻止默认事件

return false;

}, false);

3.显示缩略图与动态增删效果

简易上传预览

#drop_zone {

display: block;

border: 2px dashed #BBB;

padding: 25px 5px;

text-align: center;

font-size: 20pt;

color: #BBB;

border-radius: 5px;

}

#drop_zone.hovering {

-webkit-box-shadow: inset 0px 0px 50px #BBB;

-moz-box-shadow: inset 0px 0px 50px #BBB;

-o-box-shadow: inset 0px 0px 50px #BBB;

box-shadow: inset 0px 0px 50px #BBB;

}

#file-upload-box {

margin: 40px 25px;

padding: 10px;

border: 1px solid #BBB;

}

#description:first-line {

margin-left: 42px;

}

#output_area {

text-align: center;

display: flex;

flex-wrap: wrap;

align-content: space-between;

position: absolute;

left: 0;

right: 0;

top: 106px;

overflow: auto;

bottom: 0;

}

#file-upload-box {

position: absolute;

top: 45px;

bottom: 45px;

left: 20px;

right: 20px;

background-color: #fff;

overflow: auto;

}

.upload-img-itme {

color: #333;

width: 170px;

margin: 10px;

color: #333;

flex: 1;

}

.upload-img-itme a.rimg-name {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

padding: 5px;

display: block;

}

.d-image {

box-shadow: 0 0 10px #bbb;

border-radius: 20px;

overflow: hidden;

width: 170px;

height: 170px;

display: inline-block;

z-index: 344;

background-color: #cecece;

position: relative;

transition: all 1s;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor: pointer;

}

.d-image:hover:after {

display: block;

}

.d-image:after {

content: "×";

font-size: 44px;

text-align: center;

width: 50%;

margin: auto;

position: absolute;

top: 50%;

display: none;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.d-image:hover> img {

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

}

将文件拖拽到这里或点击这里

清空

上传

var ImgType = ["gif", "jpeg", "jpg", "bmp", "png", "ico", "webp"];

function getFileUrl(fileObj) {

return window.URL.createObjectURL(fileObj);

}

//拖拽功能

var output = document.getElementById('output_area');

var dropZone = document.getElementById('drop_zone');

if(!(('draggable' in dropZone) && ('ondragenter' in dropZone) &&

('ondragleave' in dropZone) && ('ondragover' in dropZone) &&

window.File)) {

document.getElementById('error_msg').style.display = 'block';

document.getElementById('demo_area').style.display = 'none';

} else {

function handleFileDragEnter(e) {

e.stopPropagation();

e.preventDefault();

this.classList.add('hovering');

}

function handleFileDragLeave(e) {

e.stopPropagation();

e.preventDefault();

this.classList.remove('hovering');

}

function handleFileDragOver(e) {

e.stopPropagation();

e.preventDefault();

e.dataTransfer.dropEffect = 'copy';

}

function handleFileDrop(e) {

e.stopPropagation();

e.preventDefault();

this.classList.remove('hovering');

FilesGetImgSv(e.dataTransfer.files);

}

dropZone.addEventListener('dragenter', handleFileDragEnter, false);

dropZone.addEventListener('dragleave', handleFileDragLeave, false);

dropZone.addEventListener('dragover', handleFileDragOver, false);

dropZone.addEventListener('drop', handleFileDrop, false);

}

//

function handleFileSelect(evt) {

FilesGetImgSv(evt.target.files);

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

//图片文件 过滤 显示

function FilesGetImgSv(files) {//获取文件

for(var i = 0, f; f = files[i]; i++) {

if(RegExp("\.(" + ImgType.join("|") + ")$", "i").test(f.name.toLowerCase())) { //这里是简单后缀验证,可添加f.type验证格式

f.BolbUrl = getFileUrl(f);

demo.ImageLs.push(f);

}

}

reloadDiv();

}

function reloadDiv(){//刷新视图

var t="";

demo.ImageLs.forEach(function(v,i){

t=t+`


${v.name}

`;

});

document.getElementById("output_area").innerHTML=t;

}

var demo = {

ImageLs: [],

removeThisUpImg: function(index) {

demo.ImageLs.splice(index, 1);

reloadDiv();

}

};