From 4436e0f8b226b87b1327f7f9f1d0338a008c6308 Mon Sep 17 00:00:00 2001 From: think2011 <452125301@qq.com> Date: Tue, 17 Nov 2015 15:48:50 +0800 Subject: [PATCH] =?UTF-8?q?Updated=20=E7=BB=99=E5=9C=A8=E7=BA=BFdemo?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=90=8E=E7=AB=AF=E4=B8=8A=E4=BC=A0=E6=94=AF?= =?UTF-8?q?=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/index.html | 18 ++--- test/index.js | 120 ++++++++++-------------------- test/{index2.html => server.html} | 18 +++-- test/{index2.js => server.js} | 120 ++++++++++++++++++++---------- 4 files changed, 138 insertions(+), 138 deletions(-) rename test/{index2.html => server.html} (84%) rename test/{index2.js => server.js} (56%) diff --git a/test/index.html b/test/index.html index f44e7c0..c97684e 100644 --- a/test/index.html +++ b/test/index.html @@ -27,24 +27,20 @@
- Lrz4 + Lrz4
+

上传图片测试

- 切换至无服务端演示 -
- -
- + 切换至带服务端演示 +
配置：宽度不超过800，高度适应，70%压缩率 -
- 演示服务端是跨域上传且免费的,所以较慢,请耐心等待.. -
+
UA
@@ -95,7 +91,7 @@

旋转方向测试

- - + + diff --git a/test/index.js b/test/index.js index d84c577..8060f78 100755 --- a/test/index.js +++ b/test/index.js @@ -34,26 +34,26 @@ window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj document.querySelector('input').addEventListener('change', function () { - var that = this, - progress = document.querySelector('progress'); + var that = this; lrz(that.files[0], { width: 800 }) .then(function (rst) { - var img = new Image(), - div = document.createElement('div'), - p = document.createElement('p'), + var img = new Image(), + div = document.createElement('div'), + p = document.createElement('p'), sourceSize = toFixed2(that.files[0].size / 1024), resultSize = toFixed2(rst.fileLen / 1024), - effect = parseInt(100 - (resultSize / sourceSize * 100)); + scale = parseInt(100 - (resultSize / sourceSize * 100)); p.style.fontSize = 13 + 'px'; - p.innerHTML = '源文件：!{sourceSize}KB
压缩后传输大小：!{resultSize}KB (省!{effect}%) '.render({ - sourceSize: sourceSize, - resultSize: resultSize, - effect : effect - }); + p.innerHTML = '源文件：' + + sourceSize + 'KB' + + '
' + + '压缩后传输大小：' + + resultSize + 'KB (省' + scale + '%)' + + ' '; div.className = 'col-sm-6'; div.appendChild(img); @@ -63,55 +63,36 @@ document.querySelector('input').addEventListener('change', function () { that.parentNode.appendChild(div); }; - progress.value = 0; - - /* ==================================================== */ - // 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用 - // 其他框架，例如ajax处理formData略有不同，请自行google，baidu。 - var xhr = new XMLHttpRequest(); - xhr.open('POST', 'http://koa-upload.herokuapp.com/'); - - xhr.onload = function () { - var data = JSON.parse(xhr.response); - - if (xhr.status === 200) { - // 上传成功 - img.src = rst.base64; - progress.value = 0; - } else { - // 处理错误 - alert(data.msg); - - div.remove(); - that.value = null; - } - }; - - xhr.onerror = function (err) { - alert('未知错误:' + JSON.stringify(err, null, 2)); - div.remove(); - that.value = null; - }; - - // issues #45 提到似乎有兼容性问题,关于progress - try { - xhr.upload.onprogress = function (e) { - if (!e.lengthComputable) return false; - - // 上传进度 - progress.value = ((e.loaded / e.total) || 0) * 100; - }; - } catch (err) { - console.error('看起来进度展示错误了,似乎不支持此特性?', err); - } - - // 添加参数 - rst.formData.append('fileLen', rst.fileLen); - rst.formData.append('xxx', '我是其他参数'); - - // 触发上传 - xhr.send(rst.formData); - /* ==================================================== */ + img.src = rst.base64; + + /* /!* ==================================================== *!/ + // 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用 + // 其他框架，例如ajax处理formData略有不同，请自行google，baidu。 + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/upload'); + + xhr.onload = function () { + if (xhr.status === 200) { + // 上传成功 + } else { + // 处理其他情况 + } + }; + + xhr.onerror = function () { + // 处理错误 + }; + + // issues #45 提到似乎有兼容性问题,关于progress + xhr.upload.onprogress = function (e) { + // 上传进度 + var percentComplete = ((e.loaded / e.total) || 0) * 100; + }; + + // 添加参数和触发上传 + rst.formData.append('a', '我是参数'); + xhr.send(rst.formData); + /!* ==================================================== *!/*/ return rst; }); @@ -166,25 +147,6 @@ function fireEvent (element, event) { } } -/** - * 替换字符串 !{} - * @param obj - * @returns {String} - * @example - * '我是!{str}'.render({str: '测试'}); - */ -String.prototype.render = function (obj) { - var str = this, reg; - - Object.keys(obj).forEach(function (v) { - reg = new RegExp('\\!\\{' + v + '\\}', 'g'); - str = str.replace(reg, obj[v]); - }); - - return str; -}; - - /** * * 　　　┏┓　　　┏┓ diff --git a/test/index2.html b/test/server.html similarity index 84% rename from test/index2.html rename to test/server.html index 2a8fabd..bd466b4 100644 --- a/test/index2.html +++ b/test/server.html @@ -27,20 +27,24 @@
- Lrz4 + Lrz4
-

上传图片测试

- 切换至服务端演示 -
+ 切换至无服务端演示 +
+ +
+ 配置：宽度不超过800，高度适应，70%压缩率 -
+
+ 演示服务端是跨域上传且免费的,所以较慢,请耐心等待.. +
UA
@@ -91,7 +95,7 @@

旋转方向测试

- - + + diff --git a/test/index2.js b/test/server.js similarity index 56% rename from test/index2.js rename to test/server.js index 8060f78..d84c577 100755 --- a/test/index2.js +++ b/test/server.js @@ -34,26 +34,26 @@ window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj document.querySelector('input').addEventListener('change', function () { - var that = this; + var that = this, + progress = document.querySelector('progress'); lrz(that.files[0], { width: 800 }) .then(function (rst) { - var img = new Image(), - div = document.createElement('div'), - p = document.createElement('p'), + var img = new Image(), + div = document.createElement('div'), + p = document.createElement('p'), sourceSize = toFixed2(that.files[0].size / 1024), resultSize = toFixed2(rst.fileLen / 1024), - scale = parseInt(100 - (resultSize / sourceSize * 100)); + effect = parseInt(100 - (resultSize / sourceSize * 100)); p.style.fontSize = 13 + 'px'; - p.innerHTML = '源文件：' + - sourceSize + 'KB' + - '
' + - '压缩后传输大小：' + - resultSize + 'KB (省' + scale + '%)' + - ' '; + p.innerHTML = '源文件：!{sourceSize}KB
压缩后传输大小：!{resultSize}KB (省!{effect}%) '.render({ + sourceSize: sourceSize, + resultSize: resultSize, + effect : effect + }); div.className = 'col-sm-6'; div.appendChild(img); @@ -63,36 +63,55 @@ document.querySelector('input').addEventListener('change', function () { that.parentNode.appendChild(div); }; - img.src = rst.base64; - - /* /!* ==================================================== *!/ - // 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用 - // 其他框架，例如ajax处理formData略有不同，请自行google，baidu。 - var xhr = new XMLHttpRequest(); - xhr.open('POST', '/upload'); - - xhr.onload = function () { - if (xhr.status === 200) { - // 上传成功 - } else { - // 处理其他情况 - } - }; - - xhr.onerror = function () { - // 处理错误 - }; - - // issues #45 提到似乎有兼容性问题,关于progress - xhr.upload.onprogress = function (e) { - // 上传进度 - var percentComplete = ((e.loaded / e.total) || 0) * 100; - }; - - // 添加参数和触发上传 - rst.formData.append('a', '我是参数'); - xhr.send(rst.formData); - /!* ==================================================== *!/*/ + progress.value = 0; + + /* ==================================================== */ + // 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用 + // 其他框架，例如ajax处理formData略有不同，请自行google，baidu。 + var xhr = new XMLHttpRequest(); + xhr.open('POST', 'http://koa-upload.herokuapp.com/'); + + xhr.onload = function () { + var data = JSON.parse(xhr.response); + + if (xhr.status === 200) { + // 上传成功 + img.src = rst.base64; + progress.value = 0; + } else { + // 处理错误 + alert(data.msg); + + div.remove(); + that.value = null; + } + }; + + xhr.onerror = function (err) { + alert('未知错误:' + JSON.stringify(err, null, 2)); + div.remove(); + that.value = null; + }; + + // issues #45 提到似乎有兼容性问题,关于progress + try { + xhr.upload.onprogress = function (e) { + if (!e.lengthComputable) return false; + + // 上传进度 + progress.value = ((e.loaded / e.total) || 0) * 100; + }; + } catch (err) { + console.error('看起来进度展示错误了,似乎不支持此特性?', err); + } + + // 添加参数 + rst.formData.append('fileLen', rst.fileLen); + rst.formData.append('xxx', '我是其他参数'); + + // 触发上传 + xhr.send(rst.formData); + /* ==================================================== */ return rst; }); @@ -147,6 +166,25 @@ function fireEvent (element, event) { } } +/** + * 替换字符串 !{} + * @param obj + * @returns {String} + * @example + * '我是!{str}'.render({str: '测试'}); + */ +String.prototype.render = function (obj) { + var str = this, reg; + + Object.keys(obj).forEach(function (v) { + reg = new RegExp('\\!\\{' + v + '\\}', 'g'); + str = str.replace(reg, obj[v]); + }); + + return str; +}; + + /** * * 　　　┏┓　　　┏┓