zoukankan      html  css  js  c++  java
  • H5图片异步拖拽上传

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
     
    #div1{ 200px; height: 200px; background: red; margin: 50px;}
    </style>
     <script src="http://hs.3g.cnfol.com/f=uh/Js/WeiXin/jquery.1.91.js"></script>
    </head>
    <body>
     
    <div id="div1">将文件拖拽到此区域</div>
     
    <input type="button" id="btn" value="subclick">
    <img src=""  id="upimg" alt="">
     
    </body>
    </html>
    <script>
    window.onload = function(){
        var odiv = document.getElementById('div1');
     
        odiv.ondragenter = function(){
            this.innerHTML='可以释放啦!';
        }
     
        odiv.ondragover = function(ev){
            ev.preventDefault();
        }
     
        odiv.ondragleave = function(){
            this.innerHTML = '将文件拖拽到此区域';
        }
     
        odiv.ondrop = function(ev){
            ev.preventDefault();
            var fs = ev.dataTransfer.files;
            var formData= new FormData();
             //相当于 <input type=file name='myfile' />
            formData.append("file",fs[0]);
     
            var xhr = new XMLHttpRequest();
            xhr.open("post","upload.php");
            xhr.onload=function(res){
                alert("上传完成!");
                $("#upimg").attr("src",res.currentTarget.responseText);
                //console.log(res.currentTarget.responseText);
            }
            xhr.send(formData);
        }   
    }
    </script>
  • 相关阅读:
    安卓测试工具uiautomator无法打开失败报错解决方案
    python2 与 python3的区别
    linux下自动获取并安装软件包 apt-get 的命令介绍
    安全测试常用几个工具
    常用安全测试工具
    实时爬取上海快3的结果
    性能测试监控工具nmon安装及使用方法
    locust性能测试框架随笔
    adb常用命令
    App性能测试
  • 原文地址:https://www.cnblogs.com/vsmart/p/6933603.html
Copyright © 2011-2022 走看看