Skip to content
This repository has been archived by the owner on May 8, 2021. It is now read-only.

Commit

Permalink
Updated 给在线demo增加后端上传支持
Browse files Browse the repository at this point in the history
  • Loading branch information
@think2011
think2011 committed Nov 17, 2015
1 parent 835ff68 commit 4436e0f
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 138 deletions.
18 changes: 7 additions & 11 deletions test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,20 @@
</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>

<div class="container">

<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>

<small><a href="server.html">切换至带服务端演示</a></small>
<br>
<small class="text-muted">配置：宽度不超过800，高度适应，70%压缩率</small>
<br/>
<small class="text-muted">演示服务端是跨域上传且免费的,所以较慢,请耐心等待..</small>
<br/>
<br>
<small class="text-muted UA">UA</small>
<hr/>
</div>
Expand Down Expand Up @@ -95,7 +91,7 @@ <h3>旋转方向测试</h3>
</footer>


<script src="../dist/lrz.bundle.js?v=46b9268"></script>
<script src="./index.js?v=b0915b3"></script>
<script src="../dist/lrz.bundle.js?v=2eb91a3"></script>
<script src="./index.js?v=d0de898"></script>
</body>
</html>
120 changes: 41 additions & 79 deletions test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '源文件：<span class="text-danger">!{sourceSize}KB</span> <br>压缩后传输大小：<span class="text-success">!{resultSize}KB (省!{effect}%)</span> '.render({
sourceSize: sourceSize,
resultSize: resultSize,
effect : effect
});
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);
Expand All @@ -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;
});
Expand Down Expand Up @@ -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;
};


/**
*
* 　　　┏┓　　　┏┓
Expand Down
18 changes: 11 additions & 7 deletions test/index2.html → test/server.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,24 @@
</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>

<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><a href="index.html">切换至无服务端演示</a></small>
<div>
<progress value="0" max="100"></progress>
</div>

<small class="text-muted">配置：宽度不超过800，高度适应，70%压缩率</small>
<br>
<br/>
<small class="text-muted">演示服务端是跨域上传且免费的,所以较慢,请耐心等待..</small>
<br/>
<small class="text-muted UA">UA</small>
<hr/>
</div>
Expand Down Expand Up @@ -91,7 +95,7 @@ <h3>旋转方向测试</h3>
</footer>


<script src="../dist/lrz.bundle.js?v=2eb91a3"></script>
<script src="./index2.js?v=d0de898"></script>
<script src="../dist/lrz.bundle.js?v=46b9268"></script>
<script src="./server.js?v=b0915b3"></script>
</body>
</html>
120 changes: 79 additions & 41 deletions test/index2.js → test/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '源文件：<span class="text-danger">' +
sourceSize + 'KB' +
'</span> <br />' +
'压缩后传输大小：<span class="text-success">' +
resultSize + 'KB (省' + scale + '%)' +
'</span> ';
p.innerHTML = '源文件：<span class="text-danger">!{sourceSize}KB</span> <br>压缩后传输大小：<span class="text-success">!{resultSize}KB (省!{effect}%)</span> '.render({
sourceSize: sourceSize,
resultSize: resultSize,
effect : effect
});

div.className = 'col-sm-6';
div.appendChild(img);
Expand All @@ -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;
});
Expand Down Expand Up @@ -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;
};


/**
*
* 　　　┏┓　　　┏┓
Expand Down

0 comments on commit 4436e0f

Please sign in to comment.