avatar upload

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',
+    	'avatar': 'js/plugins/avatar',
-    	'jquery.ui.widget': 'tinymce/plugins/leaui_image/public/js/jquery.ui.widget',
+    	'jquery.ui.widget': 'js/plugins/libs-min/jquery.ui.widget',
-    	'fileupload': '/tinymce/plugins/leaui_image/public/js/jquery.fileupload',
+        'fileupload': 'js/plugins/libs-min/jquery.fileupload',
-    	'iframe-transport': '/tinymce/plugins/leaui_image/public/js/jquery.iframe-transport'
+        '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>
 

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);
+        }
+    });
+});