From 407b44382c50b55a3a6d2d4aee4a8295da7a6ce0 Mon Sep 17 00:00:00 2001
From: lealife <lifephp@gmail.com>
Date: Mon, 12 Oct 2015 19:44:43 +0800
Subject: [PATCH] avatar upload
---
app/views/member/user/avatar.html | 10 +--
public/js/plugins/attachment_upload.js | 2 +-
public/js/plugins/avatar.js | 119 +++++++++++++++++++++++++
3 files changed, 125 insertions(+), 6 deletions(-)
create mode 100644 public/js/plugins/avatar.js
diff --git a/app/views/member/user/avatar.html b/app/views/member/user/avatar.html
index 89ab954..6726e5a 100644
--- a/app/views/member/user/avatar.html
+++ b/app/views/member/user/avatar.html
@@ -37,17 +37,17 @@ require.config({
baseUrl: '/public',
paths: {
// ajax upload image/attach
- 'attachment_upload': 'js/app/attachment_upload',
- 'jquery.ui.widget': 'tinymce/plugins/leaui_image/public/js/jquery.ui.widget',
- 'fileupload': '/tinymce/plugins/leaui_image/public/js/jquery.fileupload',
- 'iframe-transport': '/tinymce/plugins/leaui_image/public/js/jquery.iframe-transport'
+ 'avatar': 'js/plugins/avatar',
+ 'jquery.ui.widget': 'js/plugins/libs-min/jquery.ui.widget',
+ 'fileupload': 'js/plugins/libs-min/jquery.fileupload',
+ 'iframe-transport': 'js/plugins/libs-min/jquery.iframe-transport',
},
shim: {
'fileupload': {deps: ['jquery.ui.widget', 'iframe-transport']}
}
});
$(function() {
- require(['attachment_upload'], function(attachment_upload) {});
+ require(['avatar'], function(avatar) {});
});
</script>
diff --git a/public/js/plugins/attachment_upload.js b/public/js/plugins/attachment_upload.js
index 309bd4a..a628a4a 100644
--- a/public/js/plugins/attachment_upload.js
+++ b/public/js/plugins/attachment_upload.js
@@ -139,6 +139,6 @@ define('attachment_upload', ['jquery.ui.widget', 'fileupload'], function(){
}
});
};
-
+
initUploader();
});
\ No newline at end of file
diff --git a/public/js/plugins/avatar.js b/public/js/plugins/avatar.js
new file mode 100644
index 0000000..c4b616e
--- /dev/null
+++ b/public/js/plugins/avatar.js
@@ -0,0 +1,119 @@
+// upload attachment
+// 依赖note
+var urlPrefix = UrlPrefix;
+define('avatar', ['jquery.ui.widget', 'fileupload'], function(){
+ // Helper function that formats the file sizes
+ function formatFileSize(bytes) {
+ if (typeof bytes !== 'number') {
+ return '';
+ }
+ if (bytes >= 1000000000) {
+ return (bytes / 1000000000).toFixed(2) + ' GB';
+ }
+ if (bytes >= 1000000) {
+ return (bytes / 1000000).toFixed(2) + ' MB';
+ }
+ return (bytes / 1000).toFixed(2) + ' KB';
+ }
+
+ function setDropStyle(dropzoneId, formId) {
+ // drag css
+ var dropZone = $(dropzoneId);
+ $(formId).bind('dragover', function (e) {
+ e.preventDefault();
+ var timeout = window.dropZoneTimeoutAttach;
+ if(timeout) {
+ clearTimeout(timeout);
+ }
+ var found = false,
+ node = e.target;
+ do {
+ if (node === dropZone[0]) {
+ found = true;
+ break;
+ }
+ node = node.parentNode;
+ } while (node != null);
+ if (found) {
+ dropZone.addClass('hover');
+ } else {
+ dropZone.removeClass('hover');
+ }
+ window.dropZoneTimeoutAttach = setTimeout(function () {
+ window.dropZoneTimeoutAttach = null;
+ dropZone.removeClass('in hover');
+ }, 100);
+ });
+ }
+
+ setDropStyle("#dropAvatar", "#uploadAvatar");
+ $('.dropzone .btn-choose-file').click(function() {
+ $(this).parent().find('input').click();
+ });
+ var $msg2 = $('#avatarUploadMsg');
+ $('#uploadAvatar').fileupload({
+ dataType: 'json',
+ dropZone: $('#dropAvatar'),
+ pasteZone: '',
+ add: function(e, data) {
+ var tpl = $('<div class="alert alert-info"><img class="loader" src="/tinymce/plugins/leaui_image/public/images/ajax-loader.gif"> <a class="close" data-dismiss="alert">×</a></div>');
+
+ // Append the file name and file size
+ tpl.append(data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small>');
+
+ // Add the HTML to the UL element
+ $msg2.html(tpl);
+ data.context = $msg2;
+
+ // 检查文件大小
+ var size = data.files[0].size;
+ var maxFileSize = +GlobalConfigs["uploadAvatarSize"] || 100;
+ if(typeof size == 'number' && size > 1024 * 1024 * maxFileSize) {
+ tpl.find("img").remove();
+ tpl.removeClass("alert-info").addClass("alert-danger");
+ tpl.append(" Warning: File size is bigger than " + maxFileSize + "M");
+ setTimeout((function(tpl) {
+ return function() {
+ tpl.remove();
+ }
+ })(tpl), 3000);
+ return;
+ }
+
+ // Automatically upload the file once it is added to the queue
+ var jqXHR;
+ setTimeout(function() {
+ jqXHR = data.submit();
+ }, 10);
+ },
+ done: function(e, data) {
+ if (data.result.Ok == true) {
+ data.context.html("");
+ var re = data.result;
+ $("#avatar").attr("src", UrlPrefix + "/" + re.Id);
+ } else {
+ var re = data.result;
+ data.context.html("");
+ var tpl = $('<div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div>');
+ tpl.append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.result.Msg);
+ data.context.html(tpl);
+ setTimeout((function(tpl) {
+ return function() {
+ tpl.remove();
+ }
+ })(tpl), 3000);
+ }
+ },
+ fail: function(e, data) {
+ data.context.html("");
+ var tpl = $('<div class="alert alert-danger"><a class="close" data-dismiss="alert">×</a></div>');
+ tpl.append('<b>Error:</b> ' + data.files[0].name + ' <small>[<i>' + formatFileSize(data.files[0].size) + '</i>]</small> ' + data.errorThrown);
+ data.context.html(tpl);
+ setTimeout((function(tpl) {
+ return function() {
+ tpl.remove();
+ }
+ })(tpl), 3000);
+ }
+ });
+});
\ No newline at end of file