前端拖拽文件上传，并预览图片
摘要： sublime插件前端开发环境 前端开发地图插件 web前端开发分页插件 平时经常用微云，微云和其他的云盘都可以在桌面直接拖拽文件上传，今搜到此功能的代码 等研究明白了把兼容性搞一下； 顺便把代码贴上……
| sublime插件前端开发环境 |
| 前端开发地图插件 |
| web前端开发分页插件 |
平时经常用微云，微云和其他的云盘都可以在桌面直接拖拽文件上传，今搜到此功能的代码
等研究明白了把兼容性搞一下；
顺便把代码贴上来：
html 代码片段
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id=”drop_area” style=”width:300px;height:200px;background:#fcc;”>
请将图片拖拽至此
</div>
<div id=”preview”></div>
<script>
//阻止默认事件
window.onload = function() {
//拖离
document.addEventListener(‘dragleave’, function(e) {
e.preventDefault()
})
//拖后放
document.addEventListener(‘drop’, function(e) {
e.preventDefault()
})
//拖进
document.addEventListener(‘dragenter’, function(e) {
e.preventDefault()
})
//拖来拖去
document.addEventListener(‘dragover’, function(e) {
e.preventDefault()
})
var box = document.getElementById(‘drop_area’) //拖拽区域
box.addEventListener(
‘drop’,
function(e) {
e.preventDefault() //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files //获取文件对象
//检测是否是拖拽文件到页面的操作
if (fileList.length == 0) {
return false
}
//检测文件是不是图片
if (fileList[0].type.indexOf(‘image’) === -1) {
alert(‘您拖的不是图片！’)
return false
}
//拖拉图片到浏览器，可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0])
var filename = fileList[0].name //图片名称
var filesize = Math.floor(fileList[0].size / 1024)
if (filesize > 500) {
alert(‘上传大小不能超过500K.’)
return false
}
var image = document.createElement(‘img’)
image.src = img
var p = document.createElement(‘p’)
p.innerHTML =
‘图片名称：’ +
filename +
‘<br/>大小：’ +
filesize +
‘KB’
document.getElementById(‘preview’).appendChild(image)
document.getElementById(‘preview’).appendChild(p)
//上传
xhr = new XMLHttpRequest()
xhr.open(‘post’, ‘upload.php’, true)
xhr.setRequestHeader(
‘X-Requested-With’,
‘XMLHttpRequest’,
)
var fd = new FormData()
fd.append(‘mypic’, fileList[0])
xhr.send(fd)
},
false,
)
}
</script>
</body>
</html>
| atom的前端开发插件 |
| chrome 插件 前端开发 |
| 前端开发火狐插件 |
» 本文来自：前端开发者 » 《前端拖拽文件上传，并预览图片》
» 本文链接地址：https://www.rokub.com/6435.html
» 您也可以订阅本站：https://www.rokub.com
近期评论