欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5拖拽文件上傳的示例代碼

  發(fā)布時間：2021-03-04 15:48:33   作者：GGCoder   我要評論
這篇文章主要介紹了HTML5拖拽文件上傳的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

上傳文件

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

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

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

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

<form action="#">
        <div class="form-group">
            <label for="input_1">請選擇文件</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 + '\n文件最近修改時間：' + file.lastModifiedDate+ '\n文件類型：' + file.type + '\n文件大?。? + file.size + '字節(jié)'
    } else {
        result.innerHTML = '沒有選擇任何文件';
    }
});
</script>

頁面拖拽操作

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

  • dragstart 拖拽開始
  • drag 正在拖拽
  • dragend 拖拽結(jié)束
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" 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 += '拖動中'
    }
    two.ondragend = function(e){
        one.innerHTML = '結(jié)束'
    }
</script>

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

頁面默認的動作是拖拽后回到原位

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

投放區(qū)的事件

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

  • dragenter 被拖放元素進入
  • dragover 被拖放元素移動
  • dragleave 被拖放元素離開
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" 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 += '拖動中'
    }
    one.ondragleave = function(e){
        one.innerHTML = '結(jié)束'
    }
</script>

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

<style type="text/css">
    *{
        box-sizing: border-box;
    }
</style>
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue;display: flex;">
        <div style="width: 50px;height: 100px;border:1px solid black;">第一個</div>
        <div style="width: 50px;height: 100px;border:1px solid pink;">第二個</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>
  • 對于谷歌瀏覽器，e.dataTransfer.setData(key,value)會導致拖拽到投放區(qū)域外的時候瀏覽器默認搜索設(shè)置的值。如果需要，我們可以屏蔽它
  • 對于火狐瀏覽器，沒有e.dataTransfer.setData(key，value)還不行。我們可以直接設(shè)置鍵值對為null，"";
  • 最新版本的谷歌和火狐瀏覽器沒有發(fā)現(xiàn)問題
  • drop事件并不能直接觸發(fā),因為默認的松開鼠標我們的拖拽物會返回原來的位置,并不會掉落,所以我們應(yīng)該阻止投放區(qū)域的默認事件.

拖拽文件上傳

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

<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></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);
}

到此這篇關(guān)于HTML5拖拽文件上傳的示例代碼的文章就介紹到這了,更多相關(guān)HTML5拖拽上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • HTML5 拖拽批量上傳文件的示例代碼

    這篇文章主要介紹了HTML5 拖拽批量上傳文件的示例代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-28

  • HTML5新特性之type=file文件上傳功能

    這篇文章主要介紹了HTML5新特性之type=file文件上傳功能,需要的朋友可以參考下
    2018-02-02

  • HTML5 文件上傳下載的實例代碼

    HTML5 中提供的文件API在前端中有著豐富的應(yīng)用，上傳、下載、讀取內(nèi)容等在日常的交互中很常見。而且在各個瀏覽器的兼容也比較好，包括移動端，除了 IE 只支持 IE10 以上的
    2017-07-03

  • Html5實現(xiàn)文件異步上傳功能

    本文簡單介紹利用Html5的FormData實現(xiàn)文件的異步上傳，還可以實現(xiàn)上傳進度條和文件大小驗證等，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
    2017-05-19

  • HTML5拖拉上傳文件的簡單實例

    本篇文章主要介紹了HTML5拖拉上傳文件的簡單實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-11

  • 使用Html5實現(xiàn)異步上傳文件,支持跨域,帶有上傳進度條

    下面小編就為大家?guī)硪黄褂肏tml5實現(xiàn)異步上傳文件,支持跨域,帶有上傳進度條。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-17

  • 移動端HTML5實現(xiàn)文件上傳功能【附代碼】

    下面小編就為大家?guī)硪黄苿佣薍TML5實現(xiàn)文件上傳功能【附代碼】。小編覺得聽錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-03-25

  • html5實現(xiàn)多文件的上傳示例代碼

    多文件的上傳在以前或許實現(xiàn)起來會很復雜，不過自從html5的出現(xiàn)，讓其變得非常容易，下面有個不錯的示例，大家可以參考下
    2014-02-13

  • HTML5實現(xiàn)同時選擇多個文件夾上傳的使用示例

    HTML5的上傳API可以支持同時選擇多個文件和選擇單個文件夾，但不支持同時選擇多個文件夾，本文就來實現(xiàn)一下HTML5實現(xiàn)同時選擇多個文件夾上傳的使用示例，具有一定的參考價
    2023-09-28

最新評論