欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

HTML5 实现文件拖放上传

发布时间：2022/11/16 HTML 14 老码农
如意编程网 收集整理的这篇文章主要介绍了 HTML5 实现文件拖放上传 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. [图片] 5375acf5gw1dusqsscfksj.jpgHTML5 实现文件拖放上传    

HTML5 实现文件拖放上传
​2. [代码][HTML]代码     

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>OSCTools JsBin在线演示-HTML5 Drag & Drop 多文件上传 from Script Tutorials</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <style>
        .container {
            overflow:hidden;
            width:960px;
            margin:20px auto;
        }
        .contr {
            background-color: #212121;
            color: #FFFFFF;
            padding: 10px 0;
            text-align: center;
         
            border-radius:10px 10px 0 0;
            -moz-border-radius:10px 10px 0 0;
            -webkit-border-radius:10px 10px 0 0;
        }
        .upload_form_cont {
            background: -moz-linear-gradient(#ffffff, #f2f2f2);
            background: -ms-linear-gradient(#ffffff, #f2f2f2);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
            background: -webkit-linear-gradient(#ffffff, #f2f2f2);
            background: -o-linear-gradient(#ffffff, #f2f2f2);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
            background: linear-gradient(#ffffff, #f2f2f2);
         
            color: #000;
            overflow: hidden;
        }
        .info {
            background-color: #EEEEEE;
            border: 1px solid #DDDDDD;
            float: left;
            font-weight: bold;
            height: 530px;
            margin: 20px;
            position: relative;
            width: 560px;
        }
        .info > div {
            font-size: 14px;
            font-weight: bold;
            padding: 10px 15px 5px;
        }
        .info > h2 {
            padding: 0 15px;
        }
        .info > canvas {
            margin-left: 15px;
            margin-bottom: 10px;
        }
        .info #url {
            width: 400px;
        }
        #dropArea {
            background-color: #DDDDDD;
            border: 3px dashed #000000;
            float: left;
            font-size: 48px;
            font-weight: bold;
            height: 530px;
            line-height: 530px;
            margin: 20px;
            position: relative;
            text-align: center;
            width: 300px;
        }
        #dropArea.hover {
            background-color: #CCCCCC;
        }
        #dropArea.uploading {
            background: #EEEEEE url(loading.gif) center 30% no-repeat;
        }
        #result .s, #result .f {
            font-size: 12px;
            margin-bottom: 10px;
            padding: 10px;
         
            border-radius:10px;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
        }
        #result .s {
            background-color: #77fc9f;
        }
        #result .f {
            background-color: #fcc577;
        }
 
      </style>
  </head>
    <body>
    <div>
      <div><h2><a href='http://www.osctools.net/' target='_blank' style='color:white;'>osctools</a>: 将你的图片拖拽到“Drop区域”(一次最多上传五个, 文件大小小于256kb)</h2></div>
        <div>
            <div >文件过大 (max filesize exceeded)</div>';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {
            dropArea.className = '';
        }
    }
 
    initHandlers();
})();

总结

以上是如意编程网为你收集整理的HTML5 实现文件拖放上传的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。