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>
  • 相关阅读:
    索引yellow 分片 UNASSIGNED 解决方案1
    Linux zip压缩多文件
    查询数据库实例名,服务名,和oracle_sid
    excel2csv 多sheet拆分到不同csv
    创建按月自动分区表
    自动生成sequence
    oracle 11g 分区表创建(自动按年、月、日分区)
    linux 查找字符串
    Oracle 字符串截取和位置
    mongodb查询某个字段数据
  • 原文地址:https://www.cnblogs.com/vsmart/p/6933603.html
Copyright © 2011-2022 走看看