1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
| <!DOCTYPE html> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="./webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="./webuploader-0.1.5/webuploader.js"></script> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
<div id="upload-container" style="margin-top: 100px"> <div id="file-list" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div> <button id="ctlBtn" class="btn btn-default">开始上传</button> </div> </div>
</body> </html> <script> let uploader = WebUploader.create({ auto: true, swf: './webuploader-0.1.5/Uploader.swf', server: 'http://localhost:8094/upload/up', dnd: '#upload-container', pick: '#picker', multiple: true, chunked: true, chunkSize: 100 * 1024 * 1024, threads: 6, method: 'POST', fileSizeLimit: 10 * 1024 * 1024 * 1024, fileSingleSizeLimit: 10 * 1024 * 1024 * 1024, fileVal: 'upload', resize: false, thumb: { width: 110, height: 110,
quality: 70,
allowMagnify: true,
crop: true,
type: 'image/jpeg' } }); uploader.on("beforeFileQueued", function (file) { console.log(file); }); uploader.on('fileQueued', function (file) { console.log(file.ext); console.log(file.size); console.log(file.name); $('#file-list').append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>'); uploader.md5File(file) .progress(function (percentage) { console.log('Percentage:', percentage); }) .then(function (val) { console.log('md5 result', val); });
}); uploader.on('uploadProgress', function (file, percentage) { let $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); if (!$percent.length) { console.log('percentage:' + percentage); $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上传中' + Math.ceil(percentage * 100) + '%'); $percent.css('width', percentage * 100 + '%'); });
uploader.on('uploadSuccess', function (file) { $('#' + file.id).find('p.state').text('已上传'); });
uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上传出错'); });
uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); </script> <style> .progress { height: 20px; width: 200px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
.progress-striped .progress-bar { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; }
.progress-bar { background-image: -webkit-linear-gradient(top, #428bca 0, #3071a9 100%); background-image: linear-gradient(to bottom, #428bca 0, #3071a9 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); }
.progress-bar { float: left; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); transition: width .6s ease; } </style>
|