纯js上传控件——fineuploader

2023-01-07 21:57:59

fineuploader是一款基于ajax实现文件上传的插件，具有以下有点：

A：支持文件上传进度显示.

B：文件拖拽浏览器上传方式

C：Ajax页面无刷新.

D：多文件上传.

F：跨浏览器.

E：跨后台服务器端语言.

GitHub下载地址：https://github.com/valums/file-uploader

现已更新地址到：https://github.com/FineUploader/fine-uploader

系在后目录结构如下

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANkAAAC3CAIAAAAQImwLAAAY30lEQVR4nO2de1RTV77HM2vdddesu+487sztPNe6nTXt3JnpdHX0SlBptbbTsQS1VludzvgEBK2tWh18W7WjtuILSEp9gCIBAUUeghIjSiVCFZ88ggHCSwRE3gRCCEnO7/4RICfn7HMSEh5nk/1ZZ7HgnLMfSb589znJ/maLYJisW7duuEUIBGcQjXcHCIQBhq1F4ouEUYL4IkEoEF8kCAXiiwShMEa++KS64mJ8GH2rrSwdZh3acB+RSCQKDg/3EfmEa13ohZNkBYuCs9yvY1T7OBEZI1+8GB9WUXzW0Jls6Ew2tieYWmIuxB4dlhy14T4DCtESLU5MnNLitezrESiuZV93splk+bHe9sQhIVqaTpjUGxPPhMad/DLm63+dCt99/MgO2cGtPDWM4YtLtDg+OKXFiIiIfpOJvUVERDjZTNLZw73NZ61CpJpOQMUOUK9mbESLHs4YafFc9MHuxlNWISovHlZePKy4cCgz4WBa3JcXYvYlnPoiNnLP6YhdJ4/tiDy8nS3KrGDRIMFZttE6K1jkEx4+cIz20ttOH9hpK8Ic7IOzbCcPnkHXIq1lukAHrl0Ze+kn0zvE6g+9aSLZQcZIi3GnvtQ9kVqaTlTn7U1PPGap/gJq99u2mi+gaieUhcDjT4rOL46PCmPXYDMaOy2KWBeRdEcaPJVbi3YKtFVrq99eUYMFgwf32pWyl/BASVR/GE0TAMB5Lba1tc4JTKRvbW2tVi1a76zpP9nERO7rqgyFuiOXko7evnYEykJso3PhCnjwoTl/jiH7La38tZDVC767mcGugUOL9JfZJ1zL9KYB3+HzxaEWhv4c1CJznLU7n+mMjJOH/kT2h9k0AWBYWmRvzvtidMTeDs0Xtfmfpyccoar2QskaUK+GogB48JH59nuGnNm6rNdbL07+4uPfxUbuQNYwDC2yR70R0+KQkFid4dEiYhQmWkTgrBafonBeiyeOfd5avD0l/vBDVSiUbYSSIHi4lCpY0J8r0SvfbE/3ep70xwcHfrxkzm+RpgjOa5E5Vg4NibTS9DGaLlGHYzRLXval7CuzjdGs/hAtohgjLUYe2lGSszs1/hBU7oZHK+Deov68ufrrb3VmTm258FrD2ZfVR366d/VL6z5ezlWD01pE31gM7fMJDrbzxWDWrYvjexdbA7Ta7G9RwhlXiYwqiBYRjNH7i9KvtibHhqoz1j4IE1m320f+Lefg9y//60fnd70Qs/XX32x6cemc315JiXLjsQwXIghhMUafu4Tt3xy2N/ir7St3rv/bhoD3/Be/s9B3+l98XhO/9rs//vbX//PL//7ZT374i5/+cGw6MwjRorDw5Hk6RIvCgszTIQgFT/ZFgrAgvkgQCmPni8RQCfwQXyQIBWx8MUNVxthSc9TnlY/iMwsePK5zp2aCQMDGFzNUZeydFEB08k2xJDAxUzX2XSKMLNj4Ytq3pdW5eelr1xVqagFAJldQFMjkish45bV8tVgSmJiRy1GUBGXwABtfTM4uOvLKq1v//fs1N28BgIUCk4nqM1pkcoW33yrrhizoYUGZoQ/FkT3hP2o3I3TswcYXH+Y/ChGJQkSiaMlcs5nqN1EGo6W719zRY6qoaVKX13Np0ZPCCdpwn4EO2M0OcvYoY67HWIONLx5+f0lBVMz2F3658wc/LM9R9RotOr25XWcKSp73ftSUh+onYkkgsqAnadHpejiPjufnonj4Yvfz5hCRqK2q5r48MUQkurBmfVe3qU1net7evyhm+tsRL915WInUoscGZVyUIp8WmZ1hPxT0g3MaPHzxYVxCiEj05N6DK99Eh4hEn//4J1VFFU3t/fXNfTXPDBV1vbkFZY590ROCMoNyQJ/Bf9T+QbKeRZ7ABW9RpxlrX+T/icRkMJz3D9r54u/OLQ+MXxoQMf3NEJEobce+2kZ9VYOh9p+fli9ZlH2rdJhanBhBmaGTmDbH0o6TRzkEhTBSa9OMrjuya14w8MXnpZoQkajgu0e6bmOhpvbx7eI9L/xixw9+pG0waJ70aj6YVzRz2uUbhSOgxQkVlHFtlHZei7bz7fXH3uMsQr9e7Gp4du4fy/b89wtXT8dbLxDTPz+4/T/+M+R734t426+oUn+/rOd2aXfq1fvuanECBGVsN8q0jg/9xn/UVgWtfrsLGNtFSXi4FrTh4Yz/UfaeYYKBL1qRyRVN7UaZXFHd2Ff+1FBaoy/U6u+VdS+Xmud+/iTpcoHbWpwIQRmOEvR/J66jtINDZ9CVajtOe2PIvjL2nmEhdF8cQiZX1D03VjX2ldUZSqr1D7U9dzXd+Wrd3N1PZq7JiUvL59LiKEAmhI8KOPliZYNBJlfk36/Iua1RqkoybzxKUdxPyrwTl5Z/JllFtIg7OPmiWBLIv7lT/3AgWhwVsPFFwoQHG18kTHiILxKEAvFFglAgvkgQCjj5YrqqLDNXm6nSpKvKMlXl6beK03JKLygfxmXe1Whr3aycMO7g5IsZqnILUAAWoAAAwAJAgQXM0ck5Yr8gIkfcwckX024WA2XVoQUAKACgwAwgi796I0/NLUeSd3GbUY9nAGDhi3VVpd+m7MxO2Jp15rOU42vijgVuXjVpyyqvAV1aKJlcIZb4e89dJZ4TwC5O8i5OH+XOuwhTi2Pvi1+t9zbpUiw9aZaeS/1tiTv9X86L+7AoY8Vyya8oigIAk5mSyRVSeba3H3pqt8dkDEjeZZS5GLXO1JMKncl9LacN9ccjt4hvxS84sH7ank+mAwUUWACg29AvlSvFEoQvepIWna6H5F1cKxgbtizt7FZDfaS+8pBOvasxb+2JbTP0ve0AFgATRVH63v7mDj1SiyTvMsyjHFqk7XYz1MIDBr4IAGFbZurKD3Q+2NiSt7op56Ovd8zIig2hKIoCMPZDW6ehrrHLsS+SvIvLeRe79kfLNzHIu9RVlV4/v7tFffB57oqW3BVNyvl1GXNj9888c9jfZOnX9RqftfRU1LYOU4sk7zKcMZrxbzw6Vz1C98ULkSuj9r8v2zU7JvRvsYcWnzm4+OS+D6MPLC1LeTd6zwyDydza0Vvd0KHWtsjkCne1SPIuTozRQ3+PuCKFfr14NOSNGk1C9zOFriG1qzG9qzG1uTr+622zS+Lekm6f3qEzNTzXaWpa76ufSWMvu6VFkndh108vOzhGuxlq4UHovlhXVXps+6zNAVPXLvrDp4v+tGbRK2sW/H7z0ikff/SqwWBsatVX1ncVljfnPWpw1xeB5F3sLgns8i60Zt0MtfAgdF+kI5MrrL8Y+yljv7mzq7eusUtd1XqnpOFGwRNpnMLL19/NJpzD8+Z1j8kjFrov0pHFZlNgkcqVUrnyxNkrEfGZ0tjLMrlSJr8ijb8WEXsV+V73KOBxWhyTj12w8kWpXOnlu1IsCZgq8feSBHv5BYglAV6+/tN8/af4Bnn7BXm/S3xxpBkYksfi4eLki4SJDU6+SJjYEF8kCAXiiwShQHyRIBRw8kWSd5nY4OSLJO8yscHJF0neRbg4+W4472kY+CLJuwyzPM+nxa7mXRwyLlokeRduxl2LJO8yypC8y8jXQ/IurhUkeRfRuOddrCWyaBGFLPtnz/Fzy6ye/Uxg4ItA8i7jnncBmvqtKmRM7XXw3LKqR7VD8i4k70KH1xe13L87nKfMrB6RmxG6L5K8C3eH+BnRvMvIa9H299BTIvTrRZJ3sevPeOVd3NSic7kZofsiybvYVzFOeZcR1yIqNyN0X6RD8i7Yw/vMCd0X6ZC8C+7wfzqDky+SvAvGOJGbwckXCRMbnHyRMLEhvkgQCsQXCUKB+CJBKODhixmqMsaWmqM+r3wUn1nw4HGdy9USBAUevpihKmPvpACik2+KJYGJmaqx7xJhxMHDF9O+LWXsoSgwmanIeOW1fLVYEpiYkety5cPG9inXSEyedaIZDwEPX7x0p/Dm8wcJT1M+y1t4IruwpbfTZKL6jBaZXOHtt8q6cRRlvS/t/hvVRIujAx6+GFOYsKty0enKuMCYS5OPxO+7HeW9vrq719zRY5LJFVZFchQlWsQGPHxxRWTi5Lj/8j12bP6eZ/973H+S3FenN7frTM0dpsZWo0yuEEu4PokmWsQGPHzxn1E9M3dsfvn4khl70r0/+2DqobneG2omBRe/siy3pqnPdS0iJlE5jsLQDqAniTnOpvBOThPRJ18N9oSWMODJ8uENHr6YrOqeu7f0xQOvT9q0bFbghQPHzzW199c399U8M1TU9TrUIgsH6RNUFIYrkoKctMefTUG1i3BrdHBkoKWJaJpCz7uUll68eDn1yOnME1mF7+3ctWhz6v4T1z/4Quu9ofrPwcV/WpZbUqN3Z4xGuxF//IA9RjuVTWF1i9kuwz+5JusjkiITAzx88XFlfXfv4AVii/FJk1HbYNA86S2p7nlQ0e2iFpHpE5e16Hw2Bd0u7Rg6l0i0yGKMrxetvnjoZGqbzrTxVPPKsOb5+5pnbXs2Y0PFn4OLXlmWe7vUVS1ypk/4ozCMSAoyV4rKpgyNs8h2EfkPtBate/knpWIKHr6oqapvajc+be6rbuwrf2oordEXavX3yrq/K9WpirpcHaOR6RMON0JHUmj3Lg6zKahkCT31wsp/IHpCu1S1y39NDLDxxbrnxqrGvrI6Q0m1/qG2566mO1+tyy3suv6gk1eLBGzAwxcfV9ZXNhisb2sjN6LFCYDQfdGKVW38m8uVEwQCHr5I8ATw8EWCJ0B8kSAUiC8ShALxRYJQwMMXSd7FE8DDFwfzLmaAfgADQA9AF0ArybtMJPDwxbRvSwHMAEaAXgAdBe0AzRQ0jk/eZRyYiFPEWODhi8nZRYN22AnQBtAEUA9Q407ehTXPy/aVg6hZMPQpsewJOHazJEfhU2KiRRTj4ouJWfcBuinooKAFoJGCOoAqgHIAtb4hQl8X6kbehZET0Ib7iHx8GF/tO6g1Pi3S596MuG4cfoHzRAAPX4zLuGO1w3ZjNT0Q2GbIp+C2vnqPG3kXhBaDw9nTCunTc3i1OComRrSIYlx88UzqLYBGgDp2IBDgZk9FyAhrMcv+xbf+gfqyZVoplBZRuRa7xQfCGc3Qp4XTYWdfaJcYQ5kDnvVXcAAPXzx1PgegBqCCHQgEUHaXfuxS3sUKWou02bG0PcMbox2u5sKYlstOzNA7yc6+0E+jXc5modZfwQGh512sfHPuGkAZBSXsQCAFGbrC5SPui7bXHLEKAf+9i50TMZ2RZwUNe+z9DDnDl6FF3u92xwE8fFEmVwAUAtxnBwIpSNbdXzgKWrQNjCzncjBG02pileDRIp9miBZRjNf8RQoKKMjv6FHRA4FVT1MpSOi6M3tUtGg32g1fi+6v5mIXiiVaFAYyuQJARcENCq5ScJmCdAqSKUiiIJ6C2K5bb4yOFu3/QN6SiIbWakPf5w6cQl/NhbbbwWouDrRIf6fJI7U4fr54nYIsCjIoSKXgPAUJFMgpiKEguiNnMq7zunGSyqiDjS9ScLlbs667ZJWucInu/kJdgaQr/83O3KkdN/7cfu33+GhRa1sJjR7rI2DkixMn70Ibi4kQ6eDhiwRPAA9fJHgCxBcJQoH4IkEoEF8kCAWcfDFdVZaZq81UadJVZZmq8vRbxWk5pReUD+My72q0tW5WThh3cPLFDFW5BSgAC1AAAGABoMAC5ujkHLFfEJEj7uDki2k3i4Gy6tACABQAUGAGkMVfvZGnRsvRbpb1wDt72Eyi8jAw8MW6qtJvU3ZmJ2zNOvNZyvE1cccCN6+atGWV14AuLZRMrhBL/L3nrhLPCWAWpmkRq7l8OJIVbP9x+nCOAmQFY+CLX633NulSLD1plp5L/W2JO/1fzov7sChjxXLJryiKAgCTmZLJFVJ5trcf36cv5LPf0cT22SZqgQWHR0Uin+Frcey5GLXO1JMKncl9LacN9ccjt4hvxS84sH7ank+mAwUUWACg29AvlSvFEpYv0iBaHCP4n2jOo1oMfDE2bFna2a2G+kh95SGdeldj3toT22boe9sBLAAmiqL0vf3NHXq0FhEJ1OCsgb20efmIYIozCRLOhAr9G4zt1s1gTwpDj1ysHqLaYhWnlWJWSp84bj8NjrWYDapXPFkcJi5K0QUtjgthW2bqyg90PtjYkre6Keejr3fMyIoNoSiKAjD2Q1unoa6xi1+LwJ7bSp+myLXQC1+ChD+hwlqIBR1M4F9zAzF30lYMUdy+lP1jsc940R4jI0bD/VAcdFpL+78d7lGAcfBFF/IudVWl18/vblEffJ67oiV3RZNyfl3G3Nj9M88c9jdZ+nW9xmctPRW1rcPVIvJlpD1djmanOkioAGvxC/ZaGDyrY9j3EN0WuzjjcbFTY4zTOBdt4Fnyy751RP/5Z8JxHxW8L16IXBm1/33ZrtkxoX+LPbT4zMHFJ/d9GH1gaVnKu9F7ZhhM5taO3uqGDrW2RSZXuKhFZDDFGS06GK6QUmN/LwXymypYWuRsi17ceS3yTRdnVjvsC23XRmnBXy8eDXmjRpPQ/Uyha0jtakzvakxtro7/etvskri3pNund+hMDc91mprW++pn0tjLLmqRM5jCP2ufP6EycB49QcpcwQW1B5U35WyLtSQM/TKVGbKxG6PRQdiBMRq10gyrdfbzTG/X9iAGx32eo4NVCN0X66pKj22ftTlg6tpFf/h00Z/WLHplzYLfb1465eOPXjUYjE2t+sr6rsLy5rxHDa77IjqY4kSChDuhQnvxbZJg31Mw93Bq0dENBa354GDUrQvPvQvLFxH3Ptw3WXwdZLy5y3l08CC6Ym7G8XMXmVxh/cXYTxn7zZ1dvXWNXeqq1jslDTcKnkjjFF6+/m42gTl4v50vdF+kI4vNpsAilSulcuWJs1ci4jOlsZdlcqVMfkUafy0i9ir/e90egIdpcRx9USpXevmuFEsCpkr8vSTBXn4BYkmAl6//NF//Kb5B3n5B3u8SX/QkLRIIowROvkiY2BBfJAgF4osEoUB8kSAUiC8ShAIGvpiXsedW+uc3U3bmJG/PTtp69VzIldiNGWc2pJ36NDny4yRpUPzRgLOhK6L3LxnvnhLcAgNfVKXvNpmBven7oK2bqm+jKhotj2oswYslqNKMr7RzCbt5X6MwH5eEcgAAC1+8mbqLLcRWtUazcrJ6xaTifPWjGkucotp/4V9RpTHTIt7vVrsHBr6Yk7yd7YialZOhXmnM2XTvg9/c0lhiMsuXvfc2qvSIanH08eQgBAa+eD1pK3toVi+fZMzZdO/IO98teFFZaD6VUvx3v5mo0kSL2ICBL149t5l9jVicr773wW++W/Bi2qWi9LvmyMS7i999A1WarkXkvCmuCVH2s5mZM7nQSRG72c7hSFmhTkCHcjwODHzxinyTVYhl1c837Yve+K+ogsftj2ostzQWZaE5/a45Kd8UHqv64K8+qNJDWuTKfDhchYVW0k6L7EmHXN8LT+8M6gT0JEuPA4O8S8bpDSYzVD1t27QvOr064VrdJb/la6JSH86aHzRrftDJ9DJ5rulIVPb7f5mKKj2oRc7Mx+AfdENinIzIT6FmoXKV4tqDimURLQqatFOfVD1t2xcTfakm4XF7YXr1ufB7e/+xbU3G9UeK3BKRSHQyq/Wrby7Pm+WNKs2jxaHYG+smlmhxPMDgejH5mzVfnovOrE163FGUWZt0sujQgdxN69IXL1zvH5v8bfjpTJFItC8ide6bYlRp7jGaFT9iBER4B1POBB1HKYcnEC3i4IuJ0qD06nNWIUarjx3K37ZFsTIgSTLnm1enSOZv2CVdu+2oSCTymzkFVdrhvQsy7GIfTmfdZHAm6GiV2ZdyeALRIg6+GH804FZjdmZt0lmNLKxg987s4NUp8xee9n4r7DfTQn8u/vs7fn9fP+u9QN83kFocPxzKypN1hwIDXzwbuuJk0ZGTxYdCv9u6+erKVRf8Fp4Wvx3+0rTQn08L/dm00J9P3f7Sq6/Pe/eN/xvvnmodrd3i8ASPBgNfjD6wZO2SeUGLff0XvLN03qyPJDM+nO2z8J3p89/ynvem2G/mFMmMKbNfn/xXn8mu1T+S0G7IOb4cgSzuwgkGvkjwEDDwRYKHQHyRIBSILxKEAvFFglAgvkgQChj4Ism7eAgY+KJ7eRfBQLIyjsDAF93LuwgGkpVxBAa+6F7exYPA/fNtDHzRvbyLB+FxWsQt78K15AltP+urgbm+XXjwlWbv4fi6ZPoekpVxBAa+6F7ehWvJE/YCKsg0DHs2DWPmIsdSK3x7SFYGzYTPu3AsM+Fg0Qqu1Sj4FzthBAjs95B8giMw8EX38i4uaxElEcSZzLY4124hWnTE2Pmiy7iXd+Fa8gSxgArHCii2AT580AIdL7WCXruFZGX4wMAX3cu7cC15wr6gc5jkt1MC4zzn1m4hWRk+MPBF9/IueL4B7JFZGQx80b28Cy5aJFkZHHzRvbwLLlokWRkcfJHgIWDgiwQPgfgiQSgI3RfvB4tEIhEuP8fymZl4/D/B8IdMmbLM9AAAAABJRU5ErkJggg==" alt="" />

项目中引用fineuploader-3.3.1.css和fineuploader-3.3.1.min.js即可

上传测试页面：Demo.html

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>Fine Uploader Demo</title>

    <link href="../../App_Common/fineuploader/fineuploader-3.3.1.css" rel="stylesheet"

        type="text/css" />

</head>

<body>

    <div id="manual-fine-uploader">

    </div>

    <button id="triggerUpload" onclick="Upload();" style="margin-top: 10px;">

        Upload now

    </button>

    <script type="text/javascript" src="../../App_Common/fineuploader/fineuploader-3.3.1.js" ></script>

    <script type="text/javascript" src="../../App_Common/jquery-1.4.2.min.js" ></script>

    <script type="text/javascript">

    $(document).ready(function(){

          var  manualuploader = new qq.FineUploader({

                autoUpload :false,

                element: document.getElementById("manual-fine-uploader"),

                request: {endpoint: 'Handler.ashx'},

                text: {uploadButton: '选择文件'},

                validation:{allowedExtensions: ['jpeg', 'jpg', 'txt','rar','zip','doc','docx','xls','xlsx'],sizeLimit: 100*(1024*1024)},

              callbacks: {

                  onComplete: function (id, name, responseJSON) {

                       if (responseJSON.success) {

                            //$(".qq-upload-list").hide();

                            alert(name+"上传成功");

                        }

                  }

              },

              deleteFile:{

               enabled: true,

               endpoint: 'Handler.ashx',

              },

                debug: true

            });

           $("#triggerUpload").click(function(){manualuploader.uploadStoredFiles();});

    });

    </script>

</body>

</html>

服务端接收：Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;

using System.Collections.Generic;

using System.Web;

using System.IO;

using System.Web.Script.Serialization;

public class Handler : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        if (context.Request != null && context.Request.Files.Count > )

        {

            HttpPostedFile file = context.Request.Files["qqfile"];//上传文件对象

            string uploadPath = context.Server.MapPath("~/UpLoad/QueOperation/");

            if (file != null)

            {

                    if (!Directory.Exists(uploadPath))

                    {

                        Directory.CreateDirectory(uploadPath);

                    }

                    string ExtName = Path.GetExtension(file.FileName);

                    string FileName = Path.GetFileNameWithoutExtension(file.FileName);

                    //string fileName = "【" + FileName + "】" + DateTime.Now.ToString("yyyyMMddHHmmss") + ExtName;

                    file.SaveAs(uploadPath + FileName + ExtName);

                    context.Response.Write("{\"success\":\"true\"}");

            }

        }

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

上传文件要因为js封装用到qq-template模板，系统自带三个这里就用默认模板

也可以将以下template直接方放入页面

<!--

    This is a legacy template and is not meant to be used in new Fine Uploader integrated projects.

    Read the "Getting Started Guide" at http://docs.fineuploader.com/quickstart/01-getting-started.html

    if you are not yet familiar with Fine Uploader UI.

-->

<script type="text/template" id="qq-template">

    <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">

        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">

            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>

        </div>

        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>

            <span class="qq-upload-drop-area-text-selector"></span>

        </div>

        <div class="qq-upload-button-selector qq-upload-button">

            <div>Upload a file</div>

        </div>

            <span class="qq-drop-processing-selector qq-drop-processing">

                <span>Processing dropped files...</span>

                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>

            </span>

        <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">

            <li>

                <div class="qq-progress-bar-container-selector">

                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>

                </div>

                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>

                <span class="qq-upload-file-selector qq-upload-file"></span>

                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>

                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">

                <span class="qq-upload-size-selector qq-upload-size"></span>

                <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>

                <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>

                <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>

                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>

            </li>

        </ul>

        <dialog class="qq-alert-dialog-selector">

            <div class="qq-dialog-message-selector"></div>

            <div class="qq-dialog-buttons">

                <button type="button" class="qq-cancel-button-selector">Close</button>

            </div>

        </dialog>

        <dialog class="qq-confirm-dialog-selector">

            <div class="qq-dialog-message-selector"></div>

            <div class="qq-dialog-buttons">

                <button type="button" class="qq-cancel-button-selector">No</button>

                <button type="button" class="qq-ok-button-selector">Yes</button>

            </div>

        </dialog>

        <dialog class="qq-prompt-dialog-selector">

            <div class="qq-dialog-message-selector"></div>

            <input type="text">

            <div class="qq-dialog-buttons">

                <button type="button" class="qq-cancel-button-selector">Cancel</button>

                <button type="button" class="qq-ok-button-selector">Ok</button>

            </div>

        </dialog>

    </div>

</script>

码农公寓

相关文章