Updated 给在线demo增加后端上传支持

think2011 · Nov 17, 2015 · 835ff68 · 835ff68
1 parent dc9b196
commit 835ff68
Show file tree

Hide file tree

Showing 3 changed files with 269 additions and 2 deletions.
diff --git a/test/index.html b/test/index.html
@@ -27,7 +27,7 @@
     </div>
     <div class="container">
         <div class="navbar-header">
-            <a href="./" class="navbar-brand">Lrz4</a>
+            <a href="./" class="navbar-brand">Lrz4 </a>
         </div>
     </div>
 </div>
@@ -36,7 +36,7 @@
     <div class="row">
         <div class="col-xs-12 text-center">
             <h3 style="margin-top: 0;">上传图片测试</h3>
-
+            <small><a href="index2.html">切换至无服务端演示</a></small>
             <div>
                 <progress value="0" max="100"></progress>
             </div>

diff --git a/test/index2.html b/test/index2.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="zh-cn">
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<head>
+    <meta charset="UTF-8">
+    <title>lrz4 demo&test</title>
+
+    <link rel="stylesheet" href="../src/lib/bootstrap.min.css?v=1e35cd1"/>
+    <style>
+        img {
+            width: 100%;
+            max-width: 320px;
+            padding: 10px 15px;
+        }
+
+        .tip {
+            position: relative;
+            top: 15px;
+            right: 10px;
+        }
+    </style>
+</head>
+<body>
+<div class="navbar navbar-default">
+    <div class="pull-right tip text-muted">遇到问题时请截图到 <a
+            href="https://github.com/think2011/localResizeIMG/issues">issues</a>
+    </div>
+    <div class="container">
+        <div class="navbar-header">
+            <a href="./" class="navbar-brand">Lrz4</a>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+
+    <div class="row">
+        <div class="col-xs-12 text-center">
+            <h3 style="margin-top: 0;">上传图片测试</h3>
+            <small><a href="index.html">切换至服务端演示</a></small>
+            <br>
+            <small class="text-muted">配置：宽度不超过800，高度适应，70%压缩率</small>
+            <br>
+            <small class="text-muted UA">UA</small>
+            <hr/>
+        </div>
+
+        <div class="col-xs-12 text-center">
+            <input accept="image/*" type="file"/>
+        </div>
+
+        <div class="col-xs-12 text-center">
+            <hr/>
+            <h3>旋转方向测试</h3>
+            <small class="text-muted">看到的图像应该全是一个方向的，没见到图片是出问题了</small>
+            <hr/>
+        </div>
+
+        <div class="col-xs-6 text-center">
+            <img data-src="img/orientation_1.JPG?v=49ec2ec"
+                 src="http://placehold.it/1x1" alt="点击载入"/>
+
+            <p>方向为【1】的图片</p>
+        </div>
+        <div class="col-xs-6 text-center">
+            <img data-src="img/orientation_3.JPG?v=c393d29"
+                 src="http://placehold.it/1x1" alt="点击载入"/>
+
+            <p>方向为【3】的图片</p>
+        </div>
+        <div class="col-xs-6 text-center">
+            <img data-src="img/orientation_6.JPG?v=cd9d967"
+                 src="http://placehold.it/1x1" alt="点击载入"/>
+
+            <p>方向为【6】的图片</p>
+        </div>
+        <div class="col-xs-6 text-center">
+            <img data-src="img/orientation_8.JPG?v=619646c"
+                 src="http://placehold.it/1x1" alt="点击载入"/>
+
+            <p>方向为【8】的图片</p>
+        </div>
+    </div>
+</div>
+
+<footer class="text-center">
+    <hr/>
+    <p class="text-muted"><a href="https://github.com/think2011/localResizeIMG">
+        localResizeIMG(<span id="version"></span>版) by think2011</a>
+    </p>
+</footer>
+
+
+<script src="../dist/lrz.bundle.js?v=2eb91a3"></script>
+<script src="./index2.js?v=d0de898"></script>
+</body>
+</html>
diff --git a/test/index2.js b/test/index2.js
@@ -0,0 +1,170 @@
+window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
+    setTimeout(function () {
+        var rst = {
+            "错误信息：": errMsg,
+            "出错文件：": scriptURI,
+            "出错行号：": lineNumber,
+            "出错列号：": columnNumber,
+            "错误详情：": errorObj
+        };
+
+        alert('出错了，下一步将显示错误信息');
+        alert(JSON.stringify(rst, null, 10));
+    });
+};
+
+
+[].forEach.call(document.querySelectorAll('[data-src]'), function (el) {
+    (function (el) {
+        el.addEventListener('click', function () {
+            el.src = 'img/loading.gif';
+
+            lrz(el.dataset.src)
+                .then(function (rst) {
+                    el.src = rst.base64;
+
+
+                    return rst;
+                });
+        });
+
+        fireEvent(el, 'click');
+    })(el);
+});
+
+
+document.querySelector('input').addEventListener('change', function () {
+    var that = this;
+
+    lrz(that.files[0], {
+        width: 800
+    })
+        .then(function (rst) {
+            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));
+
+            p.style.fontSize = 13 + 'px';
+            p.innerHTML      = '源文件：<span class="text-danger">' +
+                sourceSize + 'KB' +
+                '</span> <br />' +
+                '压缩后传输大小：<span class="text-success">' +
+                resultSize + 'KB (省' + scale + '%)' +
+                '</span> ';
+
+            div.className = 'col-sm-6';
+            div.appendChild(img);
+            div.appendChild(p);
+
+            img.onload = 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);
+             /!* ==================================================== *!/*/
+
+            return rst;
+        });
+});
+
+document.querySelector('#version').innerHTML = lrz.version;
+document.querySelector('.UA').innerHTML      = 'UA: ' + navigator.userAgent;
+
+function toFixed2 (num) {
+    return parseFloat(+num.toFixed(2));
+}
+
+/**
+ * 替换字符串 !{}
+ * @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;
+};
+
+/**
+ * 触发事件 - 只是为了兼容演示demo而已
+ * @param element
+ * @param event
+ * @returns {boolean}
+ */
+function fireEvent (element, event) {
+    var evt;
+
+    if (document.createEventObject) {
+        // IE浏览器支持fireEvent方法
+        evt = document.createEventObject();
+        return element.fireEvent('on' + event, evt)
+    }
+    else {
+        // 其他标准浏览器使用dispatchEvent方法
+        evt = document.createEvent('HTMLEvents');
+        // initEvent接受3个参数：
+        // 事件类型，是否冒泡，是否阻止浏览器的默认行为
+        evt.initEvent(event, true, true);
+        return !element.dispatchEvent(evt);
+    }
+}
+
+/**
+ *
+ * 　　　┏┓　　　┏┓
+ * 　　┏┛┻━━━┛┻┓
+ * 　　┃　　　　　　　┃
+ * 　　┃　　　━　　　┃
+ * 　　┃　┳┛　┗┳　┃
+ * 　　┃　　　　　　　┃
+ * 　　┃　　　┻　　　┃
+ * 　　┃　　　　　　　┃
+ * 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
+ * 　　　　┃　　　┃    神兽保佑,代码无bug
+ * 　　　　┃　　　┃
+ * 　　　　┃　　　┗━━━┓
+ * 　　　　┃　　　　　 ┣┓
+ * 　　　　┃　　　　 ┏┛
+ * 　　　　┗┓┓┏━┳┓┏┛
+ * 　　　　　┃┫┫　┃┫┫
+ * 　　　　　┗┻┛　┗┻┛
+ *
+ */