纯js上传控件——fineuploader
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>
纯js上传控件——fineuploader的更多相关文章
- js上传控件 plupload 使用记录
最近一个项目需要使用一个上传控件进行多图片上传,给用户更好的体验,找到了plupload,用了一下感觉还是不错的, 1.从官网上 可以获得例子 ,我集成到了jsp,如下: <%@ page l ...
- jquery.html5uploader.js 上传控件
插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521 先上个效果图: 相比来说,效果还是很不错的 使用MVC3做服务器 ...
- Js获取file上传控件的文件路径总结
总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...
- java+Word图片上传控件
这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...
- 百度 flash html5自切换 多文件异步上传控件webuploader基本用法
双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
- 基于AngularJs的上传控件-angular-file-upload
今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)
我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...
随机推荐
- java script 闭包
闭包的概念真的是很绕,我就来点实际的代码. 当我用下面的代码的时候 发生了闭包,当执行onclick事件的时候,变量一直引用了外部函数的变量,结果i总是4 function newLoad() { / ...
- 关于typedef的用法总结(转)
不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...
- smartUpload组件文件上传
public class SmartUploadServlet extends HttpServlet { public void doGet(HttpServletRequest request, ...
- Hibernate设置派生属性(formula)
一.Customer中包含的字段: private static final long serialVersionUID = 1L; private Integer id; private ...
- hadoop删除节点
1.修改Master节点Hdfs-site.xml,增加dfs.hosts.exclude参数 eg: <property> <name>dfs.hosts.exclude&l ...
- linux下单节点oracle数据库间ogg搭建
环境说明: linux为Linux 2.6.32-573.el6.x86_64 oracle为 11g Enterprise Edition Release 11.2.0.1.0 - 64 ...
- min—width的使用
在网页中,如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化.如果想要保持布局不变,可以给该元素(如div)设置最小宽度属性 .box{ ba ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- js调用百度地图API创建地图,搜索位置
实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
- noip2003复赛普及组第一题——乒乓球
/*======================================================================= 题一.乒乓球(Table.pas) [问题背景]国际 ...