From e96496ddcde78ddecabac6557489fa2366df9d65 Mon Sep 17 00:00:00 2001 From: guange <8863824@gmail.com> Date: Fri, 8 Jan 2016 23:01:16 +0800 Subject: [PATCH] =?UTF-8?q?avatar.js=E5=92=8Cattachments.js=E5=86=B2?= =?UTF-8?q?=E7=AA=81,=E5=AF=BC=E8=87=B4=E5=A4=B4=E5=83=8F=E4=B8=8D?= =?UTF-8?q?=E8=83=BD=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/javascripts/avatars.js | 357 +++++++++++++++++----------------- 1 file changed, 182 insertions(+), 175 deletions(-) diff --git a/public/javascripts/avatars.js b/public/javascripts/avatars.js index 571ea4982..05b0df2fe 100644 --- a/public/javascripts/avatars.js +++ b/public/javascripts/avatars.js @@ -2,210 +2,217 @@ Copyright (C) 2006-2013 Jean-Philippe Lang Modified by Jianfeng Tao, to upload one avatar for user*/ -function addFile(inputEl, file, eagerUpload) { - - var fileSpan = $('#avatar_file'); - //fileSpan.append( - // $('', { type: 'text', 'class': 'filename readonly', name: 'avatar[filename]', readonly: 'readonly'} ).val(file.name), - // $(' ').attr({ href: "#", 'class': 'remove-upload' }).click(removeFile).toggle(!eagerUpload) - //).appendTo('#avatar_fields'); +(function(){ - if(eagerUpload) { - ajaxUpload(file, fileSpan, inputEl); + function addFile(inputEl, file, eagerUpload) { + + var fileSpan = $('#avatar_file'); + + //fileSpan.append( + // $('', { type: 'text', 'class': 'filename readonly', name: 'avatar[filename]', readonly: 'readonly'} ).val(file.name), + // $(' ').attr({ href: "#", 'class': 'remove-upload' }).click(removeFile).toggle(!eagerUpload) + //).appendTo('#avatar_fields'); + + if(eagerUpload) { + ajaxUpload(file, fileSpan, inputEl); + } + + return 1; } - return 1; -} + function ajaxUpload(file, fileSpan, inputEl) { -function ajaxUpload(file, fileSpan, inputEl) { + function onLoadstart(e) { + fileSpan.removeClass('ajax-waiting'); + fileSpan.addClass('ajax-loading'); + $('input:submit', $(this).parents('form')).attr('disabled', 'disabled'); + } - function onLoadstart(e) { - fileSpan.removeClass('ajax-waiting'); - fileSpan.addClass('ajax-loading'); - $('input:submit', $(this).parents('form')).attr('disabled', 'disabled'); - } + function onProgress(e) { + if(e.lengthComputable) { + this.progressbar( 'value', e.loaded * 100 / e.total ); + } + } - function onProgress(e) { - if(e.lengthComputable) { - this.progressbar( 'value', e.loaded * 100 / e.total ); + function actualUpload(file, fileSpan, inputEl) { + + ajaxUpload.uploading++; + + uploadBlob(file, $(inputEl).data('upload-path'),$(inputEl).data('source-type'), $(inputEl).data('source-id'),{ + loadstartEventHandler: onLoadstart.bind(progressSpan), + progressEventHandler: onProgress.bind(progressSpan) + }) + .done(function(result) { + progressSpan.progressbar( 'value', 100 ); + progressSpan.progressbar( 'destroy'); + fileSpan.find('input.description, a').css('display', 'inline-block'); + }) + .fail(function(result) { + progressSpan.text(result.statusText); + }).always(function() { + ajaxUpload.uploading--; + fileSpan.removeClass('ajax-loading'); + var form = fileSpan.parents('form'); + + // if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) { + // $('input:submit', form).removeAttr('disabled'); + // } + // form.dequeue('upload'); + }); + } + + + var progressSpan = $('#upload_progressbar'); + progressSpan.progressbar(); + fileSpan.addClass('ajax-waiting'); + + var maxSyncUpload = $(inputEl).data('max-concurrent-uploads'); + + if(maxSyncUpload == null || maxSyncUpload <= 0 || ajaxUpload.uploading < maxSyncUpload) + actualUpload(file, fileSpan, inputEl); + else + $(inputEl).parents('form').queue('upload', actualUpload.bind(this, file, fileSpan, inputEl)); } - } - function actualUpload(file, fileSpan, inputEl) { + ajaxUpload.uploading = 0; - ajaxUpload.uploading++; + function removeFile() { + $(this).parent('span').remove(); + return false; + } - uploadBlob(file, $(inputEl).data('upload-path'),$(inputEl).data('source-type'), $(inputEl).data('source-id'),{ - loadstartEventHandler: onLoadstart.bind(progressSpan), - progressEventHandler: onProgress.bind(progressSpan) - }) - .done(function(result) { - progressSpan.progressbar( 'value', 100 ); - progressSpan.progressbar( 'destroy'); - fileSpan.find('input.description, a').css('display', 'inline-block'); - }) - .fail(function(result) { - progressSpan.text(result.statusText); - }).always(function() { - ajaxUpload.uploading--; - fileSpan.removeClass('ajax-loading'); - var form = fileSpan.parents('form'); + function uploadBlob(blob, uploadUrl, source_type,source_id, options) { - // if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) { - // $('input:submit', form).removeAttr('disabled'); - // } - // form.dequeue('upload'); - }); - } + var actualOptions = $.extend({ + loadstartEventHandler: $.noop, + progressEventHandler: $.noop + }, options); + uploadUrl = uploadUrl + '?source_type=' + source_type + '&source_id=' + source_id; + if (blob instanceof window.File) { + uploadUrl += '&filename=' + encodeURIComponent(blob.name); + } - var progressSpan = $('#upload_progressbar'); - progressSpan.progressbar(); - fileSpan.addClass('ajax-waiting'); + return $.ajax(uploadUrl, { + type: 'POST', + contentType: 'application/octet-stream', + beforeSend: function(jqXhr) { + jqXhr.setRequestHeader('Accept', 'application/js'); + }, + xhr: function() { + var xhr = $.ajaxSettings.xhr(); + xhr.upload.onloadstart = actualOptions.loadstartEventHandler; + xhr.upload.onprogress = actualOptions.progressEventHandler; + return xhr; + }, + data: blob, + cache: false, + processData: false + }); + } - var maxSyncUpload = $(inputEl).data('max-concurrent-uploads'); - - if(maxSyncUpload == null || maxSyncUpload <= 0 || ajaxUpload.uploading < maxSyncUpload) - actualUpload(file, fileSpan, inputEl); - else - $(inputEl).parents('form').queue('upload', actualUpload.bind(this, file, fileSpan, inputEl)); -} - -ajaxUpload.uploading = 0; - -function removeFile() { - $(this).parent('span').remove(); - return false; -} - -function uploadBlob(blob, uploadUrl, source_type,source_id, options) { - - var actualOptions = $.extend({ - loadstartEventHandler: $.noop, - progressEventHandler: $.noop - }, options); - - uploadUrl = uploadUrl + '?source_type=' + source_type + '&source_id=' + source_id; - if (blob instanceof window.File) { - uploadUrl += '&filename=' + encodeURIComponent(blob.name); - } - - return $.ajax(uploadUrl, { - type: 'POST', - contentType: 'application/octet-stream', - beforeSend: function(jqXhr) { - jqXhr.setRequestHeader('Accept', 'application/js'); - }, - xhr: function() { - var xhr = $.ajaxSettings.xhr(); - xhr.upload.onloadstart = actualOptions.loadstartEventHandler; - xhr.upload.onprogress = actualOptions.progressEventHandler; - return xhr; - }, - data: blob, - cache: false, - processData: false - }); -} - -function addInputAvatar(inputEl) { + window.addInputAvatar = function(inputEl) { // var clearedFileInput = $(inputEl).clone().val(''); - if (inputEl.files) { - // upload files using ajax - uploadAndAttachFiles(inputEl.files, inputEl); - // $(inputEl).remove(); - } else { - // browser not supporting the file API, upload on form submission - var avatarId; - var aFilename = inputEl.value.split(/\/|\\/); - avatarId = addFile(inputEl, { name: aFilename[ aFilename.length - 1 ] }, false); - if (avatarId) { - $(inputEl).attr({ name: 'avatar[file]', style: 'display:none;' }).appendTo('#avatar_image'); + if (inputEl.files) { + // upload files using ajax + uploadAndAttachFiles(inputEl.files, inputEl); + // $(inputEl).remove(); + } else { + // browser not supporting the file API, upload on form submission + var avatarId; + var aFilename = inputEl.value.split(/\/|\\/); + avatarId = addFile(inputEl, { name: aFilename[ aFilename.length - 1 ] }, false); + if (avatarId) { + $(inputEl).attr({ name: 'avatar[file]', style: 'display:none;' }).appendTo('#avatar_image'); + } + } + + //clearedFileInput.insertAfter('#avatars_fields'); } - } - //clearedFileInput.insertAfter('#avatars_fields'); -} + function uploadAndAttachFiles(files, inputEl) { + var maxFileSize = $(inputEl).data('max-file-size'); + var maxFileSizeExceeded = $(inputEl).data('max-file-size-message'); -function uploadAndAttachFiles(files, inputEl) { - - var maxFileSize = $(inputEl).data('max-file-size'); - var maxFileSizeExceeded = $(inputEl).data('max-file-size-message'); - - var sizeExceeded = false; - $.each(files, function() { - if (this.size && maxFileSize && this.size > parseInt(maxFileSize)) {sizeExceeded=true;} - }); - if (sizeExceeded) { - window.alert(maxFileSizeExceeded); - } else { - uploadAndTypeFiles(files,inputEl); - //$.each(files, function() {addFile(inputEl, this, true);}); - } -} - -function uploadAndTypeFiles(files, inputEl) { - - var enableType = $(inputEl).data('file-type'); - var typeSupportrdMessage = $(inputEl).data('type-support-message'); - if (enableType == null || enableType.trim() == "") - { - $.each(files, function() {addFile(inputEl, this, true);}); - return; + var sizeExceeded = false; + $.each(files, function() { + if (this.size && maxFileSize && this.size > parseInt(maxFileSize)) {sizeExceeded=true;} + }); + if (sizeExceeded) { + window.alert(maxFileSizeExceeded); + } else { + uploadAndTypeFiles(files,inputEl); + //$.each(files, function() {addFile(inputEl, this, true);}); + } } - var typeSupported = false; - $.each(files, function() { - var a = this.name.split('.'); - var type = a[a.length-1]; - var rs = enableType.indexOf(type); - if(rs >= 0) {typeSupported = true } - }); - if (typeSupported) { - $.each(files, function() {addFile(inputEl, this, true);}); - } else { - window.alert(typeSupportrdMessage + enableType); + + function uploadAndTypeFiles(files, inputEl) { + + var enableType = $(inputEl).data('file-type'); + var typeSupportrdMessage = $(inputEl).data('type-support-message'); + if (enableType == null || enableType.trim() == "") + { + $.each(files, function() {addFile(inputEl, this, true);}); + return; + } + var typeSupported = false; + $.each(files, function() { + var a = this.name.split('.'); + var type = a[a.length-1]; + var rs = enableType.indexOf(type); + if(rs >= 0) {typeSupported = true } + }); + if (typeSupported) { + $.each(files, function() {addFile(inputEl, this, true);}); + } else { + window.alert(typeSupportrdMessage + enableType); + } } -} -function handleFileDropEvent(e) { - $(this).removeClass('fileover'); - blockEventPropagation(e); - if ($.inArray('Files', e.dataTransfer.types) > -1) { - uploadAndAttachFiles(e.dataTransfer.files, $('input:file.file_selector')); - } -} -function dragOverHandler(e) { - $(this).addClass('fileover'); - blockEventPropagation(e); -} + function handleFileDropEvent(e) { + $(this).removeClass('fileover'); + blockEventPropagation(e); -function dragOutHandler(e) { - $(this).removeClass('fileover'); - blockEventPropagation(e); -} + if ($.inArray('Files', e.dataTransfer.types) > -1) { + uploadAndAttachFiles(e.dataTransfer.files, $('input:file.file_selector')); + } + } -function setupFileDrop() { - $('#avatar_image').on('click', function(){ - console.log("click"); - }); - if (window.File && window.FileList && window.ProgressEvent && window.FormData) { + function dragOverHandler(e) { + $(this).addClass('fileover'); + blockEventPropagation(e); + } - $.event.fixHooks.drop = { props: [ 'dataTransfer' ] }; + function dragOutHandler(e) { + $(this).removeClass('fileover'); + blockEventPropagation(e); + } - $('form div.box').has('input:file').each(function() { - $(this).on({ - dragover: dragOverHandler, - dragleave: dragOutHandler, - drop: handleFileDropEvent - }); - }); - } -} + function setupFileDrop() { + console.log("setupFileDrop"); + $('#avatar_image').on('click', function(){ + console.log("click"); + }); + if (window.File && window.FileList && window.ProgressEvent && window.FormData) { + + $.event.fixHooks.drop = { props: [ 'dataTransfer' ] }; + + $('form div.box').has('input:file').each(function() { + $(this).on({ + dragover: dragOverHandler, + dragleave: dragOutHandler, + drop: handleFileDropEvent + }); + }); + } + } + + $(document).ready(setupFileDrop); +})(); -$(document).ready(setupFileDrop);