溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

web前端頁面如何實(shí)現(xiàn)拖拽文件上傳

發(fā)布時(shí)間：2022-02-25 10:59:11 來源：億速云 閱讀：992 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“web前端頁面如何實(shí)現(xiàn)拖拽文件上傳”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“web前端頁面如何實(shí)現(xiàn)拖拽文件上傳”吧!

上傳文件

HTML5新增了文件API,提供客戶端本地操作文件的可能.

我們可以通過file表單或拖放操作選擇文件,還可以通過JavaScript讀取文件的名稱、大小、類型、和修改時(shí)間.

file類型的input表單新增了files屬性,保存我們上傳文件的信息,如果要實(shí)現(xiàn)多文件上傳,可以設(shè)置input的multiple屬性.

可以使用accept屬性規(guī)定文件上傳的MIME類型 例如’image/jpeg’

<form action="#">
        <div class="form-group">
            <label for="input_1">請(qǐng)選擇文件</label>
            <input id="input_1" class="form-control" name="input_1" type="file">
        </div>
        <div class="form-group">
            <button id="btn_1" class="btn btn-default" type="button">讀取文件信息</button>
        </div>
</form>
<pre id="result"></pre>
</div>
<script>
var btn = document.querySelector('#btn_1');
var input = document.querySelector('#input_1');
btn.addEventListener('click', function() {
    // 獲取文件域中選擇的文件
    // var file = input.files[0];
    var file = input.files.item(0);
    if (file) {
        result.innerHTML =
            '文件名：' + file.name + '
文件最近修改時(shí)間：' + file.lastModifiedDate+ '
文件類型：' + file.type + '
文件大?。?#39; + file.size + '字節(jié)'
    } else {
        result.innerHTML = '沒有選擇任何文件';
    }
});
</script>

頁面拖拽操作

對(duì)于被拖拽的元素,HTML5增加了三個(gè)事件用于監(jiān)聽拖拽的過程

  • dragstart 拖拽開始

  • drag 正在拖拽

  • dragend 拖拽結(jié)束

<body>
    <div id="one" ></div>
    <div id="two"  draggable="true"></div>
</body>
<script type="text/javascript">
    two.ondragstart = function(e){
        // e.preventDefault();
        console.log(e);
        e.dataTransfer.setData("Text",e.target.id);
        console.log(e.dataTransfer.getData("Text",e.target.id));
        one.innerHTML = '開始'
    }
    two.ondrag = function(e){
        one.innerHTML += '拖動(dòng)中'
    }
    two.ondragend = function(e){
        one.innerHTML = '結(jié)束'
    }
</script>

想要拖拽元素,必須設(shè)置draggable屬性

頁面默認(rèn)的動(dòng)作是拖拽后回到原位

在拖動(dòng)階段，我們可以存儲(chǔ)被拖動(dòng)元素的屬性或者狀態(tài)到事件對(duì)象的dataTransfer中，如果出現(xiàn)跳轉(zhuǎn)，則是瀏覽器默認(rèn)的事件被觸發(fā)，我們需要使用e.preventDefault()來阻止默認(rèn)事件。

投放區(qū)的事件

對(duì)于被拖的元素而言，拖向何處則為投放區(qū)，投放區(qū)的事件如下：

  • dragenter 被拖放元素進(jìn)入

  • dragover 被拖放元素移動(dòng)

  • dragleave 被拖放元素離開

<body>
    <div id="one" ></div>
    <div id="two"  draggable="true"></div>
</body>
<script type="text/javascript">
    one.ondragenter = function(e){
        // e.preventDefault();
        console.log(e);
        one.innerHTML = '開始'
    }
    one.ondragover = function(e){
        one.innerHTML += '拖動(dòng)中'
    }
    one.ondragleave = function(e){
        one.innerHTML = '結(jié)束'
    }
</script>

而drop則是監(jiān)聽被拖拽物拖拽到投放區(qū)并松開鼠標(biāo)的事件，他可以接收到dataTransfer中的數(shù)據(jù)，所以我們的頁面內(nèi)拖拽可以寫成如下效果：

<style type="text/css">
    *{
        box-sizing: border-box;
    }
</style>
<body>
    <div id="one" ></div>
    <div id="two" >
        <div >第一個(gè)</div>
        <div >第二個(gè)</div>
    </div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
two.onmousedown = function(e){
    e.target.draggable = true;
    e.target.ondragstart = function(ev) {
        ev.dataTransfer.setData("Text", ev.target.innerHTML);
    }
    e.target.ondragend = function(){
        two.removeChild(this)
    }
}
one.ondrop = function(e) {
    var div = document.createElement('div')
    div.style = "width: 50px;height: 100px;border:1px solid black;"
    div.innerHTML = e.dataTransfer.getData("Text")
    this.appendChild(div)
}
</script>

  • 對(duì)于谷歌瀏覽器，e.dataTransfer.setData(key,value)會(huì)導(dǎo)致拖拽到投放區(qū)域外的時(shí)候?yàn)g覽器默認(rèn)搜索設(shè)置的值。如果需要，我們可以屏蔽它

  • 對(duì)于火狐瀏覽器，沒有e.dataTransfer.setData(key，value)還不行。我們可以直接設(shè)置鍵值對(duì)為null，"";

  • 最新版本的谷歌和火狐瀏覽器沒有發(fā)現(xiàn)問題

  • drop事件并不能直接觸發(fā),因?yàn)槟J(rèn)的松開鼠標(biāo)我們的拖拽物會(huì)返回原來的位置,并不會(huì)掉落,所以我們應(yīng)該阻止投放區(qū)域的默認(rèn)事件.

拖拽文件上傳

經(jīng)過觀察，事件對(duì)象中的dataTransfer也存在files屬性，我們可以用熟悉的方法上傳拖拽進(jìn)來的文件：

<body>
    <div id="one" ></div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
one.ondrop = function(e) {
    e.preventDefault()
    console.log(e.dataTransfer.files[0]);
}
</script>

然后做Ajax文件上傳即可

one.ondrop = function(e) {
    e.preventDefault()
    var file = e.dataTransfer.files[0];
    var formData = new FormData();
    formData.append("aa", file);
    var xml = new XMLHttpRequest();
    xml.open("post", url, false);
    xml.send(formData);
}

到此，相信大家對(duì)“web前端頁面如何實(shí)現(xiàn)拖拽文件上傳”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手