HTML5拖拽文件上傳的示例代碼
發(fā)布時(shí)間：2021-03-04 15:48:33 作者：GGCoder 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了HTML5拖拽文件上傳的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
上傳文件
HTML5新增了文件API,提供客戶(hù)端本地操作文件的可能.
我們可以通過(guò)file表單或拖放操作選擇文件,還可以通過(guò)JavaScript讀取文件的名稱(chēng)、大小、類(lèi)型、和修改時(shí)間.
file類(lèi)型的input表單新增了files屬性,保存我們上傳文件的信息,如果要實(shí)現(xiàn)多文件上傳,可以設(shè)置input的multiple屬性.
可以使用accept屬性規(guī)定文件上傳的MIME類(lèi)型 例如’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 + '\n文件最近修改時(shí)間：' + file.lastModifiedDate+ '\n文件類(lèi)型：' + file.type + '\n文件大小：' + file.size + '字節(jié)'
} else {
result.innerHTML = '沒(méi)有選擇任何文件';
}
});
</script>
頁(yè)面拖拽操作
對(duì)于被拖拽的元素,HTML5增加了三個(gè)事件用于監(jiān)聽(tīng)拖拽的過(guò)程
- dragstart 拖拽開(kāi)始
- 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 = '開(kāi)始'
}
two.ondrag = function(e){
one.innerHTML += '拖動(dòng)中'
}
two.ondragend = function(e){
one.innerHTML = '結(jié)束'
}
</script>
想要拖拽元素,必須設(shè)置draggable屬性
頁(yè)面默認(rèn)的動(dòng)作是拖拽后回到原位
在拖動(dòng)階段，我們可以存儲(chǔ)被拖動(dòng)元素的屬性或者狀態(tài)到事件對(duì)象的dataTransfer中，如果出現(xiàn)跳轉(zhuǎn)，則是瀏覽器默認(rèn)的事件被觸發(fā)，我們需要使用e.preventDefault()來(lái)阻止默認(rèn)事件。
投放區(qū)的事件
對(duì)于被拖的元素而言，拖向何處則為投放區(qū)，投放區(qū)的事件如下：
- dragenter 被拖放元素進(jìn)入
- dragover 被拖放元素移動(dòng)
- dragleave 被拖放元素離開(kāi)
<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 = '開(kāi)始'
}
one.ondragover = function(e){
one.innerHTML += '拖動(dòng)中'
}
one.ondragleave = function(e){
one.innerHTML = '結(jié)束'
}
</script>
而drop則是監(jiān)聽(tīng)被拖拽物拖拽到投放區(qū)并松開(kāi)鼠標(biāo)的事件，他可以接收到dataTransfer中的數(shù)據(jù)，所以我們的頁(yè)面內(nèi)拖拽可以寫(xiě)成如下效果：
<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;">第一個(gè)</div>
<div style="width: 50px;height: 100px;border:1px solid pink;">第二個(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ì)于火狐瀏覽器，沒(méi)有e.dataTransfer.setData(key，value)還不行。我們可以直接設(shè)置鍵值對(duì)為null，"";
- 最新版本的谷歌和火狐瀏覽器沒(méi)有發(fā)現(xiàn)問(wèn)題
- drop事件并不能直接觸發(fā),因?yàn)槟J(rèn)的松開(kāi)鼠標(biāo)我們的拖拽物會(huì)返回原來(lái)的位置,并不會(huì)掉落,所以我們應(yīng)該阻止投放區(qū)域的默認(rèn)事件.
拖拽文件上傳
經(jīng)過(guò)觀察，事件對(duì)象中的dataTransfer也存在files屬性，我們可以用熟悉的方法上傳拖拽進(jìn)來(lái)的文件：
<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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了HTML5 拖拽批量上傳文件的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-28- 這篇文章主要介紹了HTML5新特性之type=file文件上傳功能,需要的朋友可以參考下2018-02-02
- HTML5 中提供的文件API在前端中有著豐富的應(yīng)用，上傳、下載、讀取內(nèi)容等在日常的交互中很常見(jiàn)。而且在各個(gè)瀏覽器的兼容也比較好，包括移動(dòng)端，除了 IE 只支持 IE10 以上的2017-07-03
- 本文簡(jiǎn)單介紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-05-19
- 本篇文章主要介紹了HTML5拖拉上傳文件的簡(jiǎn)單實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-11
使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
下面小編就為大家?guī)?lái)一篇使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-17移動(dòng)端HTML5實(shí)現(xiàn)文件上傳功能【附代碼】
下面小編就為大家?guī)?lái)一篇移動(dòng)端HTML5實(shí)現(xiàn)文件上傳功能【附代碼】。小編覺(jué)得聽(tīng)錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25- 多文件的上傳在以前或許實(shí)現(xiàn)起來(lái)會(huì)很復(fù)雜，不過(guò)自從html5的出現(xiàn)，讓其變得非常容易，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-13
HTML5實(shí)現(xiàn)同時(shí)選擇多個(gè)文件夾上傳的使用示例
HTML5的上傳API可以支持同時(shí)選擇多個(gè)文件和選擇單個(gè)文件夾，但不支持同時(shí)選擇多個(gè)文件夾，本文就來(lái)實(shí)現(xiàn)一下HTML5實(shí)現(xiàn)同時(shí)選擇多個(gè)文件夾上傳的使用示例，具有一定的參考價(jià)2023-09-28
