网站建设   网站建设技术   网页设计   html/css  

HTML5拖拽文件上传的示例代码

人浏览  发布时间:2021-03-15

这篇文章主要介绍了HTML5拖拽文件上传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间. file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性. 可以使用accept属性规定文件上传的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 + 字节 } else { result.innerHTML = 没有选择任何文件; } }); /script 页面拖拽操作 对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程 dragstart 拖拽开始 drag 正在拖拽 dragend 拖拽...
这篇文章主要介绍了HTML5拖拽文件上传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
HTML5新增了文件API,提供客户端本地操作文件的可能.
 
我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.
 
file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.
 
可以使用accept属性规定文件上传的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 + '字节'
    } else {
        result.innerHTML = '没有选择任何文件';
    }
});
</script>
页面拖拽操作
对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程
 
dragstart 拖拽开始
drag 正在拖拽
dragend 拖拽结束
 
<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 = '结束'
    }
</script>
想要拖拽元素,必须设置draggable属性
 
页面默认的动作是拖拽后回到原位
 
在拖动阶段,我们可以存储被拖动元素的属性或者状态到事件对象的dataTransfer中,如果出现跳转,则是浏览器默认的事件被触发,我们需要使用e.preventDefault()来阻止默认事件。
 
投放区的事件
 
对于被拖的元素而言,拖向何处则为投放区,投放区的事件如下:
 
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 = '结束'
    }
</script>
而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件,他可以接收到dataTransfer中的数据,所以我们的页面内拖拽可以写成如下效果:
 
<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)会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要,我们可以屏蔽它
对于火狐浏览器,没有e.dataTransfer.setData(key,value)还不行。我们可以直接设置键值对为null,"";
最新版本的谷歌和火狐浏览器没有发现问题
drop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.
拖拽文件上传
经过观察,事件对象中的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);
}
 
(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图