介绍 & lt; div id=癮pp"比;
& lt; div类=癱ontent"祝辞
& lt; div类=癲rag-area"@dragover=癴ileDragover"@drop=癴ileDrop"比;
& lt; div v=癴ileName"类=癴ile-name"在{{文件名}}& lt;/div>
& lt; div v-else类=皍ploader-tips"祝辞
& lt; span>将文件拖拽至此,或& lt;/span>
& lt;标签=癴ileInput"风格=把丈?# 11 a8ff;光标:pointer"在点此上传& lt;/label>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=癴ooter"祝辞
& lt;输入类型=癴ile"id=癴ileInput"@change=癱hooseUploadFile"风格=跋允?没有,“比;
& lt;标签=癴ileInput"v=癴ileName"风格=把丈?# 11 a8ff;光标:pointer"在选择文件& lt;/label>
& lt;按钮@click=皍ploadOk"祝辞提交& lt;/button>
& lt;/div>
& lt;/div> * {
字体大小:14 px;
｝
.drag-area {
身高:200 px;
宽度:300 px;
边界:冲1 px灰色;
margin-bottom: 10 px;
颜色:# 777;
｝
.uploader-tips {
text-align:中心;
身高:200 px;
行高:200 px;
｝
.file-name {
text-align:中心;
身高:200 px;
行高:200 px;
} 新Vue ({
艾尔:& # 39;#应用# 39;
数据(){
返回{
文件名:& # 39;& # 39;
batchFile: & # 39; & # 39;
MAX_FILE_SIZE: 10 * 1000 * 1000
｝
},
方法:{//点击上传
chooseUploadFile (e) {
常量文件=e.target.files.item (0)
如果文件(!)回来
如果文件。大小比;this.MAX_FILE_SIZE) {
返回警告(& # 39;文件大小不能超过猴10 # 39;)
｝
这一点。batchFile=文件
这一点。文件名=file.name//清空,防止上传后再上传没有反应
e。target。值=https://www.yisu.com/zixun/?
},//拖拽上传
fileDragover (e) {
e.preventDefault ()
},
fileDrop (e) {
e.preventDefault ()=e.dataTransfer常量文件。文件[0]//获取到第一个上传的文件对象
如果文件(!)回来
如果文件。大? this.MAX_FILE_SIZE) {
返回警告(“文件大小不能超过10米)
｝
这一点。batchFile=文件
这一点。文件名=file.name
},//提交
uploadOk () {
如果这一点。batchFile===") {
返回警告(“请选择要上传的文件的)
｝
让数据=new FormData ()
数据。追加(upfile, this.batchFile)//ajax
｝
｝
}) <李>
这篇文章主要介绍JavaScript拖拽上传功能如何实现,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
最近,小明遇到这样一种情况:在网页中上传文件时偶尔页面会崩溃。小明仔细测试了这种情况,发现之前用的一个文件上传组件有一点缺陷,于是,小明决定自己手写一个,样式如下:
图一是没有上传文件时的样式,图二为上传文件后的样式。虚线部分为放置区域,先来看代码:
<强> html部分
<强> css部分
<>强js部分
<>强核心原理说明
dragover和滴事件
第一个要说的就是拖拽中的这两个事件,因为这两个事件撑起了拖拽上传的核心功能。
对于拖拽这个动作而言,有二个核心概念,一个是<代码>拖拽元素> 放置目标>
那对于放置目标,它有什么事件呢?如下:
当某个元素被拖动到一个有效的放置目标上(如上例中虚线区域)时,下列事件会依次发生:
(1) dragenter
(2) dragover
(3) dragleave或下降
只要有元素被拖动到放置目标上,就会触发dragenter事件(类似于鼠标悬停事件)。紧随其后的是dragover事件,而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中,则会触发滴事件而不是dragleave事件。
对于本例来说,我们只需要关注dragover和滴事件。但是滴事件却有点调皮,你想监听它,还得进行一些处理,因为默认情况下,元素是不允许放置的,在拖动元素经过某些无效放置目标时,可以看到一种特殊的光标(圆环中有一条反斜线),表示不能放置。如下:
