├── ChangeLog.md ├── Demo ├── index.html └── upload.php ├── README.md └── assets ├── css ├── demo.css ├── img │ ├── bluebg.png │ ├── github.jpg │ ├── github.png │ └── image.png ├── new.css └── prism.css ├── image ├── html.png ├── jianrong.gif ├── other.jpg └── upload.png └── js ├── lUpload.js ├── lUpload.min.js └── prism.js /ChangeLog.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | lUpload-Demo 6 | 7 | 8 | 9 | 10 |
11 | 22 |
23 |
24 | 这是一款多功能的上传插件 25 |
26 |
27 |
28 |

Demo

29 | 您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo. 30 |
31 |
32 |
33 |
34 | 35 |
36 |
37 | 点击上传 38 | 39 | 40 |
41 |
42 | 将文件拖到这里试试? 43 |
44 |
45 |
46 | 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /Demo/upload.php: -------------------------------------------------------------------------------- 1 | 1.粘贴上传 4 | 2.拖拽上传 5 | 3.选择上传 6 | 4.实时上传速度 7 | 5.实时进度信息 8 | 7.可自定义不同文件类型上传缩略图 9 | 8.同步上传(队列阻塞模式, 文件会一个接一个的上传.) 10 | 9.异步上传 11 | 12 | 浏览器支持情况： 13 | ![github logo](http://dsphper.github.io/assets/image/jianrong.gif) 14 | 15 | ### DEMO 16 | 项目主页：http://dsphper.github.io/ 17 | 演示Demo：http://1.lupload.applinzi.com/Demo/index.html 18 | ### Document 19 | #### 使用本插件您完全不需要有太多的JS相关知识，只需按照文档简单的书写相关调用函数即可， 20 | ## 拖拽上传 21 | ```javascript 22 | // 添加拖拽上传事件 23 | $('#event').dropFile(opts); 24 | ``` 25 | ## 选择上传 26 | ```javascript 27 | // 添加选择上传事件 28 | $('#event #selectFile').selectFile(opts); 29 | ``` 30 | ## 粘贴上传 31 | ```javascript 32 | // 添加粘贴上传事件 33 | $('#event').pasteFile(opts); 34 | ``` 35 | ## 同时使用多个上传事件 36 | ```javascript 37 | // 添加拖拽上传事件 38 | $('#event').dropFile(opts); 39 | // 添加选择上传事件 40 | $('#event #selectFile').selectFile(opts); 41 | // 添加粘贴上传事件 42 | $('#event').pasteFile(opts); 43 | 44 | ``` 45 | 46 | ## HTML代码 47 | ```html 48 | 请引入jQuery与本插件 49 | 这是上传详情展示的地方，ID默认使用`uList`如果想要更改请修改源代码。 50 | 53 | ``` 54 | 55 | ## 插件使用实例： 56 | 57 | ```javascript 58 | // 说明 $('#drop').dropFile为拖拽上传 $('#drop').pasteFile为粘贴上传 $('#drop').selectFile 为选择上传 59 | // 拖拽上传 60 | var opts = { 61 | url : '/lUpload/Demo/upload.php', 62 | maxfiles: 111 , // 单次上传的数量 63 | maxfilesize : 11, // 单个文件允许的大小 (M) 64 | multithreading : true, // true为同时上传false为队列上传 65 | type : [], // 限制上传的类型 66 | Knowntype : {'pdf':'./image/pdf.jpg', 'html':'./assets/image/html.png'}, // 根据不同上传类型设置缩略图 67 | tpl : function(type) { // 自定义模板 68 | var imageTpl = '
  • \ 69 |
    \ 70 | \ 71 |
    \ 72 |
    \ 73 | 文件名称: default \ 74 | 图片尺寸: default \ 75 | 文件大小: default \ 76 | 上传速度: default \ 77 | 上传详情: default \ 78 | \ 79 | 上传状态: 等待上传\ 80 | \ 81 | \ 86 |
    \ 87 |
    • '; 88 | var otherTpl = '
  • \ 89 |
    \ 90 | \ 91 |
    \ 92 |
    \ 93 | 文件名称: default \ 94 | 文件大小: default \ 95 | 上传速度: default \ 96 | 上传详情: default \ 97 | \ 98 | 上传状态: 等待上传\ 99 | \ 100 | \ 105 |
    \ 106 |
    • '; 107 | // 为不同的上传类型定义不同的模板 ClassName 必须注意填写正确 108 | if(type == 'image') { 109 | return imageTpl; 110 | } else if(type == 'other') { 111 | return otherTpl; 112 | } 113 | }, 114 | // result 结构 {thisDom: 当前被上传的节点, progress: 进度, speed: "网速", loaded: "已上传的大小 992 KB"} 115 | dynamic : function(result) { // 返回网速及上传百分比 116 | result.thisDom.find('#progress').css('width', result.progress + '%').html(result.progress + '%'); 117 | result.thisDom.find('.speed').text("网速：" + result.speed + " K\/S"); 118 | result.thisDom.find('.loaded text').text(result.loaded + ' / ' + result.total); 119 | }, 120 | complete : function(file) { // 上传完成后调用的 121 | var uList = $('#uList li').eq(file.index); 122 | uList.find('.stage text').html('上传完成！'); 123 | // 使用 file.index 查看第几个文件上传完毕 124 | }, 125 | stageChange : function(file) { 126 | var uList = $('#uList li').eq(file.index); 127 | uList.find('.progress').show(); 128 | uList.find('.stage text').html('正在被上传'); 129 | } // 当开启队列上传时可以知道那个文件正在被上传 130 | }; 131 | $(function() { 132 | $('#event').dropFile(opts); 133 | $('#event #selectFile').selectFile(opts); 134 | $('#event').pasteFile(opts); 135 | }) 136 | ``` 137 | 138 | 139 | ### 版权 140 | ###### MIT 141 | -------------------------------------------------------------------------------- /assets/css/demo.css: -------------------------------------------------------------------------------- 1 | /* latin */ 2 | @font-face { 3 | font-family: 'Muli'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Muli'), url(http://fonts.gstatic.com/s/muli/v7/z6c3Zzm51I2zB_Gi7146Bg.woff2) format('woff2'); 7 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 8 | } 9 | /* vietnamese */ 10 | @font-face { 11 | font-family: 'Source Sans Pro'; 12 | font-style: normal; 13 | font-weight: 400; 14 | src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNOAHFN6BivSraYkjhveRHY.woff2) format('woff2'); 15 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 16 | } 17 | /* latin-ext */ 18 | @font-face { 19 | font-family: 'Source Sans Pro'; 20 | font-style: normal; 21 | font-weight: 400; 22 | src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlC2Q8seG17bfDXYR_jUsrzg.woff2) format('woff2'); 23 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 24 | } 25 | /* latin */ 26 | @font-face { 27 | font-family: 'Source Sans Pro'; 28 | font-style: normal; 29 | font-weight: 400; 30 | src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNV_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2'); 31 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 32 | } 33 | * { 34 | padding: 0; 35 | margin: 0; 36 | font-size: 16px; 37 | font-family: 微软雅黑; 38 | } 39 | header { 40 | width: 100%; 41 | height: auto; 42 | } 43 | header nav { 44 | width: 100%; 45 | height: 60px; 46 | background: #353636; 47 | } 48 | header nav div#line { 49 | width: 1260px; 50 | height: 60px; 51 | margin: 0 auto; 52 | } 53 | header nav div#line #title { 54 | font-family: 'Source Sans Pro', sans-serif; 55 | font-size: 30px; 56 | display: block; 57 | color: #FFF; 58 | line-height: 60px; 59 | float: left; 60 | } 61 | header nav div#line #right { 62 | 63 | } 64 | header nav div#line #right span { 65 | width: 100px; 66 | height: 60px; 67 | background: transparent; 68 | display: block; 69 | float: right; 70 | background: url('./img/github.png') no-repeat; 71 | background-size: 50%; 72 | cursor: pointer; 73 | } 74 | #blueBack { 75 | width: 100%; 76 | height: 118px; 77 | background-color: #13a7c7; 78 | background-image: url('./img/bluebg.png'); 79 | background-position: 1px -100px; 80 | -webkit-animation: blueBg 40s linear infinite; 81 | -o-animation: blueBg 40s linear infinite; 82 | animation: blueBg 40s linear infinite; 83 | } 84 | #blueBack span { 85 | display: block; 86 | font-size: 28px; 87 | color: #FFF; 88 | width: 1260px; 89 | line-height: 118px; 90 | margin: 0 auto; 91 | } 92 | @keyframes blueBg { 93 | from { 94 | background-position: 0 1000px; 95 | } 96 | to { 97 | background-position: 0 0px; 98 | } 99 | } 100 | #details { 101 | width: 100%; 102 | height: auto; 103 | background-color: #fcfcfd; 104 | overflow: hidden; 105 | } 106 | #details #center { 107 | width: 1260px; 108 | margin: 0 auto; 109 | color: #979797; 110 | } 111 | #details #center #left { 112 | margin-top: 20px; 113 | width: 620px; 114 | height: 410px; 115 | background-image: url('../image/upload.png'); 116 | float: left; 117 | } 118 | #details #center #right { 119 | margin-top: 20px; 120 | width: 600px; 121 | height: 410px; 122 | background-color: #FFF; 123 | float: right; 124 | border: 1px solid #E4E4E4; 125 | } 126 | #details #center #right #top { 127 | width: 100%; 128 | height: 240px; 129 | border-bottom: 1px solid #E4E4E4; 130 | background-color: #FBFAFA; 131 | padding: 20px; 132 | box-sizing: border-box; 133 | } 134 | #details #center #right #top h4 , #details #center #right #bottom h4{ 135 | font-size: 18px; 136 | font-weight: 400; 137 | } 138 | 139 | #details #center #right #bottom { 140 | width: 100%; 141 | padding: 18px; 142 | box-sizing: border-box; 143 | } 144 | #details #center #right #top ul { 145 | padding: 10px; 146 | list-style: none; 147 | color: #666666; 148 | font-size: 14px !important; 149 | } 150 | #details #center #right #top ul#ul li { 151 | font-size: 14px; 152 | } 153 | #content { 154 | width: 1260px; 155 | margin: 0 auto; 156 | } 157 | -------------------------------------------------------------------------------- /assets/css/img/bluebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/css/img/bluebg.png -------------------------------------------------------------------------------- /assets/css/img/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/css/img/github.jpg -------------------------------------------------------------------------------- /assets/css/img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/css/img/github.png -------------------------------------------------------------------------------- /assets/css/img/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/css/img/image.png -------------------------------------------------------------------------------- /assets/css/new.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #center { 6 | width: 1260px; 7 | margin: 0 auto; 8 | height: auto; 9 | } 10 | #center #title { 11 | 12 | font-family: 微软雅黑; 13 | margin-bottom: 20px; 14 | } 15 | #center #title h1 { 16 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 17 | font-weight: 500; 18 | padding-top: 20px; 19 | padding-bottom: 20px; 20 | color: rgb(51, 51, 51); 21 | font-size: 36px; 22 | } 23 | #center #title span { 24 | font-family: 'Myriad Pro', 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, Calibri, Helvetica, tahoma, arial, simsun, 宋体, sans-serif; 25 | color: rgb(51, 51, 51); 26 | font-size: 16px; 27 | } 28 | #center #event { 29 | width: 1260px; 30 | height: 460px; 31 | background-color: #FAFAFA; 32 | box-shadow: rgba(0, 0, 0, 0.0470588) 0px 3px 6px 0px inset; 33 | display: -webkit-box; 34 | -webkit-box-orient: horizontal; 35 | -webkit-box-pack: center; 36 | -webkit-box-align: center; 37 | display: -moz-box; 38 | -moz-box-orient: horizontal; 39 | -moz-box-pack: center; 40 | -moz-box-align: center; 41 | display: -o-box; 42 | -o-box-orient: horizontal; 43 | -o-box-pack: center; 44 | -o-box-align: center; 45 | display: -ms-box; 46 | -ms-box-orient: horizontal; 47 | -ms-box-pack: center; 48 | -ms-box-align: center; 49 | display: box; 50 | box-orient: horizontal; 51 | box-pack: center; 52 | box-align: center; 53 | } 54 | #center #event #dashed { 55 | width: 1140px; 56 | height: 360px; 57 | border: 4px dashed #E6E6E6; 58 | } 59 | #center #event #dashed #topImg { 60 | width: 100%; 61 | height: 180px; 62 | background-image: url('./img/image.png'); 63 | background-repeat: no-repeat; 64 | background-position: bottom center; 65 | } 66 | #center #event #dashed #middle { 67 | width: 168px; 68 | height: 44px; 69 | margin: 0 auto; 70 | background: #00B7EE; 71 | text-align: center; 72 | line-height: 44px; 73 | color: #FFF; 74 | font-family: 微软雅黑; 75 | cursor: pointer; 76 | margin-top: 15px; 77 | position: relative; 78 | } 79 | #center #event #dashed #middle:hover { 80 | background: #00A2D4; 81 | } 82 | #center #event #dashed #middle #selectFile { 83 | position: absolute; 84 | top: 0px; 85 | left: 0px; 86 | width: 100%; 87 | height: 100%; 88 | opacity: 0; 89 | } 90 | #center #event #dashed #bottom { 91 | width: 200px; 92 | margin: 0 auto; 93 | text-align: center; 94 | font-family: "Myriad Pro", "Hiragino Sans GB","Microsoft YaHei","微软雅黑", Calibri, Helvetica, tahoma,arial,simsun,"宋体", sans-serif; 95 | margin-top: 10px; 96 | color: rgb(204, 204, 204); 97 | font-size: 20px; 98 | } 99 | #center #uList { 100 | width: 100%; 101 | height: auto; 102 | list-style: none; 103 | } 104 | #center #uList li { 105 | width: 350px; 106 | height: 440px; 107 | background: #FAFAFA; 108 | float: left; 109 | margin-top: 25px; 110 | position: relative; 111 | border: 1px solid #DFDFDF; 112 | box-sizing: border-box; 113 | } 114 | #center #uList li .uploadInfo { 115 | font-family: "Microsoft YaHei","微软雅黑", Calibri, Helvetica, tahoma,arial,simsun,"宋体", sans-serif; 116 | font-size: 16px; 117 | width: 100%; 118 | height: 197px; 119 | position: absolute; 120 | bottom: 0px; 121 | color: #CCCCCC; 122 | 123 | } 124 | #center #uList li .uploadInfo span { 125 | display: block; 126 | line-height: 26px; 127 | padding-left: 20px; 128 | padding-right: 20px; 129 | } 130 | #center #uList li .uploadInfo .progress { 131 | margin-top: 10px; 132 | } 133 | /*#center #uList li:nth-child(3n-5) { 134 | margin-left: 20px; 135 | 136 | }*/ 137 | 138 | #center #uList li:nth-child(3n-4) { 139 | margin-left: 105px; 140 | margin-right: 105px; 141 | 142 | } 143 | /*#center #uList li:nth-child(3n+0) { 144 | margin-left: 20px; 145 | 146 | }*/ 147 | 148 | 149 | #center #uList li .image { 150 | display: -webkit-box; 151 | -webkit-box-orient: horizontal; 152 | -webkit-box-pack: center; 153 | -webkit-box-align: center; 154 | display: -moz-box; 155 | -moz-box-orient: horizontal; 156 | -moz-box-pack: center; 157 | -moz-box-align: center; 158 | display: -o-box; 159 | -o-box-orient: horizontal; 160 | -o-box-pack: center; 161 | -o-box-align: center; 162 | display: -ms-box; 163 | -ms-box-orient: horizontal; 164 | -ms-box-pack: center; 165 | -ms-box-align: center; 166 | display: box; 167 | box-orient: horizontal; 168 | box-pack: center; 169 | box-align: center; 170 | /*width: 245px;*/ 171 | /*height: 230px;*/ 172 | /*border: 4px solid #FFFFFF;*/ 173 | } 174 | #center #uList li .image img { 175 | max-width: 325px; 176 | max-height: 243px; 177 | border: 3px solid #fff; 178 | display: block; 179 | box-shadow: 0 0 2px #DDD; 180 | } -------------------------------------------------------------------------------- /assets/css/prism.css: -------------------------------------------------------------------------------- 1 | code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:0.5em;margin:.5em 0;overflow:auto;border-radius:3px}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#272822}:not(pre)>code[class*="language-"]{padding:.1em;}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.builtin{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important{font-weight:bold}.token.entity{cursor:help} -------------------------------------------------------------------------------- /assets/image/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/image/html.png -------------------------------------------------------------------------------- /assets/image/jianrong.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/image/jianrong.gif -------------------------------------------------------------------------------- /assets/image/other.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/image/other.jpg -------------------------------------------------------------------------------- /assets/image/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsphper/lUpload/bdf2747ef8e0d1f8ce351c235c72b01e2322899e/assets/image/upload.png -------------------------------------------------------------------------------- /assets/js/lUpload.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author : dsphper 3 | * Email : dsphper@gmail.com 4 | * Version : 1.0.1 5 | * Licensed under the MIT license: 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * Project home: 8 | * https://github.com/dsphper/lUpload 9 | */ 10 | !(function ($) { 11 | var opts = {}, 12 | defaultOpts = { 13 | url: '', // 后台接受地址 14 | maxfiles: 2, // 最大上传文件数 15 | maxfilesize: 2, // 最大的文件大小 16 | dynamic: function (complete, speed) { 17 | }, 18 | error: function (error, file, i) { 19 | alert(error) 20 | }, // 异常信息接收 21 | multithreading: true, // 是否同时上传 22 | type: [], // 限制上传的类型 23 | dragenter: function (e) { 24 | return false; 25 | }, 26 | dragleave: function (e) { 27 | return false; 28 | }, 29 | dragover: function (e) { 30 | return false; 31 | }, 32 | drop: function (e) { 33 | return false; 34 | }, 35 | dropDefa: function (e) { 36 | return false; 37 | }, 38 | enterDefa: function (e) { 39 | return false; 40 | }, 41 | leaveDefa: function (e) { 42 | return false; 43 | }, 44 | overDefa: function (e) { 45 | return false; 46 | }, 47 | tpl: function () { 48 | return 'false'; 49 | }, 50 | setImageTpl: function (file, image, img) { 51 | }, 52 | setOtherTpl: function (file) { 53 | }, 54 | complete: function (file) { 55 | }, 56 | stageChange: function (file) { 57 | }, // 当开启队列上传时可以知道那个文件正在被上传 58 | Knowntype: {'pdf': './image/pdf.jpg', 'html': './image/html.png'}, 59 | selectMultiple: true // 允许选择多个文件 60 | }, 61 | errorTexts = ["浏览器不支持", "超过最大文件数", "文件大小超过限制", "不允许的上传格式"], 62 | errorCode = {200: 'warning', 201: 'deadly'}, // warning 普通错误 deadly 致命错误 63 | uploadImg = [], 64 | uploadTotal = 0, // 本次操作被放入的文件数 65 | fi = 0, // 记录总共拖入的文件数 66 | thisFile = 0, // 存放当前文件的资源对象 67 | startTime = 0, // 当前文件的上传开始时间 68 | queue = [], // 用于队列上传 69 | loadOk = 0, // 用于记录当前操作放入的文件被加载成功的数目 70 | time = []; // 用于计算每个文件上传的平均网速 71 | // 拖拽上传 72 | $.fn.dropFile = function (userOpts) { 73 | $.event.props.push("dataTransfer"); 74 | opts = $.extend({}, defaultOpts, userOpts); 75 | this.bind('dragenter', dragenter).bind('dragleave', dragleave).bind('dragover', dragover).bind('drop', drop); 76 | $(document).bind('drop', dropDefa).bind('dragover', overDefa).bind('dragleave', leaveDefa).bind('dragenter', enterDefa); 77 | } 78 | // 粘贴上传 79 | $.fn.pasteFile = function (userOpts) { 80 | $.event.props.push("clipboardData"); 81 | opts = $.extend({}, defaultOpts, userOpts); 82 | var _this = this; 83 | this.bind('mouseover', function () { 84 | _this.bind('paste', pasteHand); 85 | }); 86 | this.bind('mouseout', function () { 87 | _this.unbind('paste', pasteHand); 88 | }); 89 | 90 | } 91 | // 选择上传 92 | $.fn.selectFile = function (userOpts) { 93 | opts = $.extend({}, defaultOpts, userOpts); 94 | if ($(this).attr('multiple') == undefined && opts.selectMultiple) { 95 | $(this).attr('multiple', 'multiple'); 96 | } 97 | $(this).bind('change', function () { 98 | handFiles(this.files) 99 | }) 100 | } 101 | function pasteHand(e) { 102 | var clipboard = e.clipboardData; 103 | var temp = []; 104 | for (var i = 0; i < clipboard.items.length; i++) { 105 | temp.push(clipboard.items[i].getAsFile()); 106 | } 107 | ; 108 | handFiles(temp); 109 | e.preventDefault(); 110 | e.stopPropagation(); 111 | 112 | } 113 | 114 | function dragenter(e) { 115 | e.dataTransfer.dropEffect = "copy"; 116 | e.preventDefault(); 117 | e.stopPropagation(); 118 | 119 | } 120 | 121 | function dragleave(e) { 122 | e.dataTransfer.dropEffect = "copy"; 123 | e.preventDefault(); 124 | e.stopPropagation(); 125 | 126 | } 127 | 128 | function dragover(e) { 129 | e.dataTransfer.dropEffect = "copy"; 130 | e.preventDefault(); 131 | e.stopPropagation(); 132 | 133 | } 134 | 135 | function drop(e) { 136 | handFiles(e.dataTransfer.files); 137 | e.dataTransfer.dropEffect = "copy"; 138 | e.preventDefault(); 139 | e.stopPropagation(); 140 | } 141 | 142 | function dropDefa(e) { 143 | opts.dropDefa(e); 144 | e.dataTransfer.dropEffect = "none"; 145 | e.preventDefault(); 146 | e.stopPropagation(); 147 | } 148 | 149 | function enterDefa(e) { 150 | opts.enterDefa(e); 151 | e.dataTransfer.dropEffect = "none"; 152 | e.preventDefault(); 153 | e.stopPropagation(); 154 | } 155 | 156 | function leaveDefa(e) { 157 | opts.leaveDefa(e); 158 | e.dataTransfer.dropEffect = "none"; 159 | e.preventDefault(); 160 | e.stopPropagation(); 161 | } 162 | 163 | function overDefa(e) { 164 | opts.overDefa(e); 165 | e.dataTransfer.dropEffect = "none"; 166 | e.preventDefault(); 167 | e.stopPropagation(); 168 | } 169 | 170 | function progress(e, file) { 171 | if (e.lengthComputable) { 172 | //计算网速 173 | var nowDate = new Date().getTime(); 174 | var x = (e.loaded) / 1024; 175 | var y = (nowDate - startTime) / 1000; 176 | time.push((x / y).toFixed(2)); 177 | if ((e.loaded / e.total) * 100 == 100) { 178 | var avg = 0; 179 | for (var i = 0; i < time.length; i++) { 180 | avg += parseInt(time[i]); 181 | } 182 | ; 183 | // 求出平均网速 184 | } 185 | var result = {}; 186 | result.thisDom = $('#uList li').eq(file.index); 187 | result.progress = Math.round((e.loaded / e.total) * 100); 188 | result.speed = (x / y).toFixed(2); 189 | result.loaded = getFileSize({size: e.loaded}); 190 | result.total = getFileSize({size: e.total}); 191 | opts.dynamic(result); 192 | } else { 193 | alert('无法获得文件大小') 194 | } 195 | } 196 | 197 | function getFileSize(file) { 198 | var filesize = file.size; 199 | if (filesize >= 1073741824) { 200 | filesize = Math.round(filesize / 1073741824 * 100) / 100 + ' GB'; 201 | } else if (filesize >= 1048576) { 202 | filesize = Math.round(filesize / 1048576 * 100) / 100 + ' MB'; 203 | } else if (filesize >= 1024) { 204 | filesize = Math.round(filesize / 1024 * 100) / 100 + ' KB'; 205 | } else { 206 | filesize = filesize + ' Bytes'; 207 | } 208 | return filesize; 209 | } 210 | 211 | function setImageTpl(file, fileReaderiImage, newImage) { 212 | var data = {}; 213 | data.file = file; 214 | data.fileReaderiImage = fileReaderiImage; 215 | data.newImage = newImage; 216 | data.fileSize = getFileSize(file); 217 | data.fileType = getFileType(file); 218 | opts.setImageTpl(data); 219 | loadOk++; 220 | if (loadOk == queue.length && !opts.multithreading) { 221 | upload(queue[0]); 222 | } 223 | if (opts.multithreading) { 224 | upload(data.file); 225 | } 226 | } 227 | 228 | function setOtherTpl(file) { 229 | var data = {}; 230 | data.file = file; 231 | data.fileSize = getFileSize(file); 232 | data.fileType = getFileType(file); 233 | opts.setOtherTpl(data); 234 | 235 | var type = getFileType(file); 236 | if (opts.Knowntype[type] != undefined && opts.Knowntype[type] != 'undefined') { 237 | var thisLi = $('#uList li').eq(data.file.index); 238 | 239 | thisLi.find('.image img').attr('src', opts.Knowntype[type]); 240 | 241 | } 242 | loadOk++; 243 | if (loadOk == queue.length && !opts.multithreading) { 244 | upload(queue[0]); 245 | } 246 | if (opts.multithreading) { 247 | upload(file); 248 | } 249 | } 250 | 251 | function getImageInfo(file, image) { 252 | var img = new Image(); 253 | img.src = image.target.result; 254 | img.addEventListener('load', function (e) { 255 | setImageTpl(file, image, img); 256 | }, false); 257 | } 258 | 259 | function readerFile(file) { 260 | var reader = new FileReader(); 261 | reader.addEventListener('load', function (e) { 262 | switchHand(file, e); 263 | }, false); 264 | reader.readAsDataURL(file); 265 | } 266 | 267 | function filter(file) { 268 | var type = !file.type ? 'other' : file.type.split('/')[1]; 269 | if (type) { 270 | var typeIsOk = false; 271 | if (opts.type.length > 0) { 272 | for (o in opts.type) { 273 | if (type == opts.type[o]) { 274 | typeIsOk = true; 275 | break; 276 | } 277 | } 278 | if (!typeIsOk) { 279 | opts.error(errorTexts[3], file); 280 | return errorCode['200']; 281 | } 282 | } 283 | 284 | } 285 | if (uploadTotal > opts.maxfiles) { 286 | opts.error(errorTexts[1], file); 287 | return errorCode['201']; 288 | } 289 | var max_file_size = 1048576 * opts.maxfilesize; 290 | if (file.size > max_file_size) { 291 | opts.error(errorTexts[2], file); 292 | return errorCode['200']; 293 | } 294 | 295 | 296 | } 297 | 298 | function createXMLHttpRequest() { 299 | if (window.XMLHttpRequest) { 300 | return new XMLHttpRequest(); 301 | } else { 302 | var names = ["msxml", "msxml2", "msxml3", "Microsoft"]; 303 | for (var i = 0; i < names.length; i++) { 304 | try { 305 | var name = names[i] + ".XMLHTTP"; 306 | return new ActiveXObject(name); 307 | } catch (e) { 308 | } 309 | } 310 | } 311 | return null; 312 | } 313 | 314 | function switchHand(file, e) { 315 | var type = !file.type ? 'other' : file.type.split('/')[1]; 316 | if (type == 'jpeg' || type == 'png' || type == 'gif' || type == 'bmp' || type == 'x-icon') { 317 | getImageInfo(file, e); 318 | return; 319 | } 320 | setOtherTpl(file); 321 | // alert('other'); 322 | } 323 | 324 | function upload(file) { 325 | file.stage = 'uploadIng'; 326 | opts.stageChange(file); 327 | var xhr = createXMLHttpRequest(); 328 | xhr.open('POST', opts.url, true); 329 | var upload = xhr.upload; 330 | if (upload) { 331 | upload.addEventListener('progress', function (e) { 332 | progress(e, file); 333 | }, false); 334 | } 335 | xhr.addEventListener('readystatechange', function () { 336 | if (xhr.readyState == 4 && xhr.status == 200) { 337 | if (!opts.multithreading) { 338 | if (queue.length > 1) { 339 | queue.shift(); 340 | loadOk--; 341 | upload_(queue[0]); 342 | } 343 | } 344 | file.responseText = xhr.responseText; 345 | opts.complete(file); 346 | } 347 | }, false); 348 | var formData = new FormData(); 349 | formData.append('FileData', file); 350 | xhr.send(formData); 351 | startTime = new Date().getTime(); 352 | } 353 | 354 | function upload_(file) { 355 | upload(file); 356 | } 357 | 358 | function handFiles(files) { 359 | files = sortFiles(files); 360 | uploadTotal = files.length; 361 | Array.prototype.push.apply(queue, files); 362 | for (var i = 0; i < files.length; i++) { 363 | var code = filter(files[i]); 364 | if (code == 'deadly') { 365 | return false; 366 | } else if (code == 'warning') { 367 | continue; 368 | } 369 | if (files[i].name == undefined) { 370 | files[i].name = 'null' 371 | } 372 | files[i].index = fi++; 373 | files[i].stage = 'Waiting'; 374 | readerFile(files[i]); 375 | thisFile = files[i]; 376 | } 377 | ; 378 | } 379 | 380 | function sortFiles(files) { 381 | var listSize = []; 382 | for (var i = 0; i < files.length; i++) { 383 | listSize[i] = files[i]; 384 | } 385 | ; 386 | for (var i = 0; i < listSize.length; i++) { 387 | for (var j = i + 1; j < listSize.length; j++) { 388 | if (listSize[j].size < listSize[i].size) { 389 | var temp = listSize[j]; 390 | listSize[j] = listSize[i]; 391 | listSize[i] = temp; 392 | } 393 | } 394 | ; 395 | } 396 | ; 397 | 398 | return listSize; 399 | } 400 | 401 | function getFileType(file) { 402 | var type = !file.type ? 'other' : file.type.split('/')[1]; 403 | return type; 404 | } 405 | })(jQuery) 406 | -------------------------------------------------------------------------------- /assets/js/lUpload.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author : dsphper 3 | * Email : dsphper@gmail.com 4 | * Version : 1.0.1 5 | * Licensed under the MIT license: 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * Project home: 8 | * https://github.com/dsphper/lUpload 9 | */ 10 | !function(a){function n(a){var d,b=a.clipboardData,c=[];for(d=0;d=1073741824?b=Math.round(100*(b/1073741824))/100+" GB":b>=1048576?b=Math.round(100*(b/1048576))/100+" MB":b>=1024?b=Math.round(100*(b/1024))/100+" KB":b+=" Bytes",b}function z(a,c,d){var e={};e.file=a,e.fileReaderiImage=c,e.newImage=d,e.fileSize=y(a),e.fileType=K(a),b.setImageTpl(e),l++,l!=k.length||b.multithreading||G(k[0]),b.multithreading&&G(e.file)}function A(c){var e,f,d={};d.file=c,d.fileSize=y(c),d.fileType=K(c),b.setOtherTpl(d),e=K(c),void 0!=b.Knowntype[e]&&"undefined"!=b.Knowntype[e]&&(f=a("#uList li").eq(d.file.index),f.find(".image img").attr("src",b.Knowntype[e])),l++,l!=k.length||b.multithreading||G(k[0]),b.multithreading&&G(c)}function B(a,b){var c=new Image;c.src=b.target.result,c.addEventListener("load",function(){z(a,b,c)},!1)}function C(a){var b=new FileReader;b.addEventListener("load",function(b){F(a,b)},!1),b.readAsDataURL(a)}function D(a){var f,h,c=a.type?a.type.split("/")[1]:"other";if(c&&(f=!1,b.type.length>0)){for(o in b.type)if(c==b.type[o]){f=!0;break}if(!f)return b.error(d[3],a),e["200"]}return g>b.maxfiles?(b.error(d[1],a),e["201"]):(h=1048576*b.maxfilesize,a.size>h?(b.error(d[2],a),e["200"]):void 0)}function E(){var a,b,c;if(window.XMLHttpRequest)return new XMLHttpRequest;for(a=["msxml","msxml2","msxml3","Microsoft"],b=0;b1&&(k.shift(),l--,H(k[0])),a.responseText=c.responseText,b.complete(a))},!1),e=new FormData,e.append("FileData",a),c.send(e),j=(new Date).getTime()}function H(a){G(a)}function I(a){var b,c;for(a=J(a),g=a.length,Array.prototype.push.apply(k,a),b=0;be.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 5 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); 7 | ; 8 | Prism.languages.php=Prism.languages.extend("clike",{keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|extends|private|protected|parent|static|throw|null|echo|print|trait|namespace|use|final|yield|goto|instanceof|finally|try|catch)\b/ig, constant:/\b[A-Z0-9_]{2,}\b/g});Prism.languages.insertBefore("php","keyword",{delimiter:/(\?>|<\?php|<\?)/ig,variable:/(\$\w+)\b/ig,"package":{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/g,lookbehind:!0,inside:{punctuation:/\\/}}});Prism.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/g,lookbehind:!0}}); Prism.languages.markup&&(Prism.hooks.add("before-highlight",function(a){"php"===a.language&&(a.tokenStack=[],a.code=a.code.replace(/(?:<\?php|<\?|<\?php|<\?)[\w\W]*?(?:\?>|\?>)/ig,function(b){a.tokenStack.push(b);return"{{{PHP"+a.tokenStack.length+"}}}"}))}),Prism.hooks.add("after-highlight",function(a){if("php"===a.language){for(var b=0,c;c=a.tokenStack[b];b++)a.highlightedCode=a.highlightedCode.replace("{{{PHP"+(b+1)+"}}}",Prism.highlight(c,a.grammar,"php"));a.element.innerHTML=a.highlightedCode}}), Prism.hooks.add("wrap",function(a){"php"===a.language&&"markup"===a.type&&(a.content=a.content.replace(/(\{\{\{PHP[0-9]+\}\}\})/g,'$1'))}),Prism.languages.insertBefore("php","comment",{markup:{pattern:/(<|<)[^?]\/?(.*?)(>|>)/g,inside:Prism.languages.markup},php:/\{\{\{PHP[0-9]+\}\}\}/g}));; --------------------------------------------------------------------------------