• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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增加了三个事件用于监听拖拽的过程

    <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()来阻止默认事件。

    投放区的事件

    对于被拖的元素而言,拖向何处则为投放区,投放区的事件如下:

    <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>
    

    拖拽文件上传

    经过观察,事件对象中的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);
    }
    

    到此这篇关于HTML5拖拽文件上传的示例代码的文章就介绍到这了,更多相关HTML5拖拽上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    上一篇:html5使用window.postMessage进行跨域实现数据交互的一次实战
    下一篇:Html5移动端div固定到底部实现底部导航条的几种方式
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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