From 7fe0dbb91a14b63d760c89fb79480341534527bf Mon Sep 17 00:00:00 2001 From: Ravishanker Kusuma Date: Tue, 20 Aug 2013 19:22:19 +0530 Subject: [PATCH] first version --- MIT-License.txt | 18 + css/uploadfile.css | 1 + js/jquery.uploadfile.js | 1304 +++++++++++++++++++++++ js/jquery.uploadfile.min.js | 19 + js/jquery.uploadfile.withoutform.js | 223 ++++ js/jquery.uploadfile.withoutform.min.js | 8 + uploadfile.jquery.json | 39 + 7 files changed, 1612 insertions(+) create mode 100644 MIT-License.txt create mode 100644 css/uploadfile.css create mode 100644 js/jquery.uploadfile.js create mode 100644 js/jquery.uploadfile.min.js create mode 100644 js/jquery.uploadfile.withoutform.js create mode 100644 js/jquery.uploadfile.withoutform.min.js create mode 100644 uploadfile.jquery.json diff --git a/MIT-License.txt b/MIT-License.txt new file mode 100644 index 0000000..c9b44cb --- /dev/null +++ b/MIT-License.txt @@ -0,0 +1,18 @@ +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/css/uploadfile.css b/css/uploadfile.css new file mode 100644 index 0000000..d8548da --- /dev/null +++ b/css/uploadfile.css @@ -0,0 +1 @@ +.ajax-file-upload-statusbar{border:1px solid #0ba1b5;margin-top:10px;width:400px;margin-right:10px;margin:5px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;padding:5px 5px 5px 5px}.ajax-file-upload-filename{width:100%;height:auto;margin:0 5px 5px 10px;color:#807579}.ajax-file-upload-progress{margin:0 10px 5px 10px;position:relative;width:250px;border:1px solid #ddd;padding:1px;border-radius:3px;display:inline-block}.ajax-file-upload-bar{background-color:#0ba1b5;width:0;height:20px;border-radius:3px}.ajax-file-upload-percent{position:absolute;display:inline-block;top:3px;left:48%}.ajax-file-upload-red{-moz-box-shadow:inset 0 39px 0 -24px #e67a73;-webkit-box-shadow:inset 0 39px 0 -24px #e67a73;box-shadow:inset 0 39px 0 -24px #e67a73;background-color:#e4685d;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;display:inline-block;color:#fff;font-family:arial;font-size:13px;font-weight:normal;padding:4px 15px;text-decoration:none;text-shadow:0 1px 0 #b23e35;cursor:pointer;vertical-align:top}.ajax-file-upload-green{background-color:#77b55a;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;margin:0;padding:0;display:inline-block;color:#fff;font-family:arial;font-size:13px;font-weight:normal;padding:4px 15px;text-decoration:none;cursor:pointer;text-shadow:0 1px 0 #5b8a3c;vertical-align:top}.ajax-file-upload{display:inline-block;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#599bdc),color-stop(100%,#3072b3));background:-moz-linear-gradient(center top,#599bdc 0,#3072b3 100%);-webkit-box-shadow:0 1px 0 0 #7dc0ff inset,0 -1px 0 0 #1a3d5e inset,0 2px 2px 0 #d4d4d4;-moz-box-shadow:0 1px 0 0 #7dc0ff inset,0 -1px 0 0 #1a3d5e inset,0 2px 2px 0 #d4d4d4;box-shadow:0 1px 0 0 #7dc0ff inset,0 -1px 0 0 #1a3d5e inset,0 2px 2px 0 #d4d4d4;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 #424242;padding:10px 20px;border-color:#295c8c;border-width:1px;border-style:solid;font-family:Lucida Grande;font-size:14px;color:#fff;cursor:pointer;width:100px}.ajax-file-upload:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#82bbf0),color-stop(100%,#3072b3));background:-moz-linear-gradient(center top,#82bbf0 0,#3072b3 100%)} \ No newline at end of file diff --git a/js/jquery.uploadfile.js b/js/jquery.uploadfile.js new file mode 100644 index 0000000..cb104dd --- /dev/null +++ b/js/jquery.uploadfile.js @@ -0,0 +1,1304 @@ +/*! + * jQuery Upload File Plugin + * version: 1.9 + * @requires jQuery v1.5 or later & form plugin + * Copyright (c) 2013 Ravishanker Kusuma + * http://hayageek.com/ + */ +(function ($) +{ +$.fn.uploadFile = function( options ) +{ +// This is the easiest way to have default options. +var s = $.extend({ +// These are the defaults. +url: "", +method: "POST", +enctype: "multipart/form-data", +formData: null, +returnType:null, +allowedTypes:"*", +fileName:"file", +multiple:false, +autoSubmit:true, +showCancel:true, +showAbort:true, +showDone:true, +showStatusAfterSuccess:true, +buttonCss: false, +buttonClass: false, +onSubmit: function(files) {}, +onSuccess: function(file, response) {}, +onError: function(file, response) {}, +uploadButtonClass:"ajax-file-upload" +}, options ); + +var formGroup = "ajax-file-upload-"+$(this).attr('id'); + +this.formGroup = formGroup; + +$(this).click(function() +{ + $.fn.uploadFile.createAjaxForm(this,formGroup,s); +}); + +this.startUpload = function() +{ + $("."+this.formGroup).each(function(i,items) + { + $(this).submit(); + }); +} + +$(this).addClass(s.uploadButtonClass); + +return this; + +}; +$.fn.uploadFile.createAjaxForm = function (obj,group,s) +{ + + var form = $(""); + + var fileInputStr=""; + + if(s.multiple) + { + if(s.fileName.indexOf("[]") != s.fileName.length-2 ) // if it does not endwith + { + s.fileName += "[]"; + } + fileInputStr=""; + } + var fileInput = $(fileInputStr).appendTo(form); + + + var statusbar = $("
"); + var filename = $("
").appendTo(statusbar); + var progressDiv =$("
").appendTo(statusbar).hide(); + var progressbar =$("
").appendTo(progressDiv); + var abort = $("
Abort
").appendTo(statusbar).hide(); + var cancel = $("
Cancel
").appendTo(statusbar).hide(); + var done = $("
Done
").appendTo(statusbar).hide(); + + + $(fileInput).change(function() + { + var fileExtensions = s.allowedTypes.toLowerCase().split(","); + var fileList=""; + var fileArray=[]; + + if(this.files) //support reading files + { + for(i=0;iERROR: "+errMsg+""); + } + + $(abort).hide(); + $(form).remove(); + } + }; + + if(s.autoSubmit) + { + $(form).ajaxSubmit(options); + } + else + { + if(s.showCancel) + { + $(cancel).show(); + $(cancel).click(function() + { + $(form).remove(); + $(statusbar).remove(); + }); + } + $(form).ajaxForm(options); + + } + }); + + + $(fileInput).click(); + +} + +/* With Ajax Form Plugin*/ +if($.fn.ajaxForm == undefined) +{ + +/*! + * jQuery Form Plugin + * version: 3.40.0-2013.08.13 + * @requires jQuery v1.5 or later + * Copyright (c) 2013 M. Alsup + * Examples and documentation at: http://malsup.com/jquery/form/ + * Project repository: https://github.com/malsup/form + * Dual licensed under the MIT and GPL licenses. + * https://github.com/malsup/form#copyright-and-license + */ +/*global ActiveXObject */ +;(function($) { +"use strict"; + + +/** + * Feature detection + */ +var feature = {}; +feature.fileapi = $("").get(0).files !== undefined; +feature.formdata = window.FormData !== undefined; + +var hasProp = !!$.fn.prop; + +$.fn.attr2 = function() { + if ( ! hasProp ) + return this.attr.apply(this, arguments); + var val = this.prop.apply(this, arguments); + if ( ( val && val.jquery ) || typeof val === 'string' ) + return val; + return this.attr.apply(this, arguments); +}; + +/** + * ajaxSubmit() provides a mechanism for immediately submitting + * an HTML form using AJAX. + */ +$.fn.ajaxSubmit = function(options) { + /*jshint scripturl:true */ + + // fast fail if nothing selected (http://dev.jquery.com/ticket/2752) + if (!this.length) { + log('ajaxSubmit: skipping submit process - no element selected'); + return this; + } + + var method, action, url, $form = this; + + if (typeof options == 'function') { + options = { success: options }; + } + else if ( options === undefined ) { + options = {}; + } + + method = options.type || this.attr2('method'); + action = options.url || this.attr2('action'); + + url = (typeof action === 'string') ? $.trim(action) : ''; + url = url || window.location.href || ''; + if (url) { + // clean url (don't include hash vaue) + url = (url.match(/^([^#]+)/)||[])[1]; + } + + options = $.extend(true, { + url: url, + success: $.ajaxSettings.success, + type: method || $.ajaxSettings.type, + iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank' + }, options); + + // hook for manipulating the form data before it is extracted; + // convenient for use with rich editors like tinyMCE or FCKEditor + var veto = {}; + this.trigger('form-pre-serialize', [this, options, veto]); + if (veto.veto) { + log('ajaxSubmit: submit vetoed via form-pre-serialize trigger'); + return this; + } + + // provide opportunity to alter form data before it is serialized + if (options.beforeSerialize && options.beforeSerialize(this, options) === false) { + log('ajaxSubmit: submit aborted via beforeSerialize callback'); + return this; + } + + var traditional = options.traditional; + if ( traditional === undefined ) { + traditional = $.ajaxSettings.traditional; + } + + var elements = []; + var qx, a = this.formToArray(options.semantic, elements); + if (options.data) { + options.extraData = options.data; + qx = $.param(options.data, traditional); + } + + // give pre-submit callback an opportunity to abort the submit + if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) { + log('ajaxSubmit: submit aborted via beforeSubmit callback'); + return this; + } + + // fire vetoable 'validate' event + this.trigger('form-submit-validate', [a, this, options, veto]); + if (veto.veto) { + log('ajaxSubmit: submit vetoed via form-submit-validate trigger'); + return this; + } + + var q = $.param(a, traditional); + if (qx) { + q = ( q ? (q + '&' + qx) : qx ); + } + if (options.type.toUpperCase() == 'GET') { + options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q; + options.data = null; // data is null for 'get' + } + else { + options.data = q; // data is the query string for 'post' + } + + var callbacks = []; + if (options.resetForm) { + callbacks.push(function() { $form.resetForm(); }); + } + if (options.clearForm) { + callbacks.push(function() { $form.clearForm(options.includeHidden); }); + } + + // perform a load on the target only if dataType is not provided + if (!options.dataType && options.target) { + var oldSuccess = options.success || function(){}; + callbacks.push(function(data) { + var fn = options.replaceTarget ? 'replaceWith' : 'html'; + $(options.target)[fn](data).each(oldSuccess, arguments); + }); + } + else if (options.success) { + callbacks.push(options.success); + } + + options.success = function(data, status, xhr) { // jQuery 1.4+ passes xhr as 3rd arg + var context = options.context || this ; // jQuery 1.4+ supports scope context + for (var i=0, max=callbacks.length; i < max; i++) { + callbacks[i].apply(context, [data, status, xhr || $form, $form]); + } + }; + + if (options.error) { + var oldError = options.error; + options.error = function(xhr, status, error) { + var context = options.context || this; + oldError.apply(context, [xhr, status, error, $form]); + }; + } + + if (options.complete) { + var oldComplete = options.complete; + options.complete = function(xhr, status) { + var context = options.context || this; + oldComplete.apply(context, [xhr, status, $form]); + }; + } + + // are there files to upload? + + // [value] (issue #113), also see comment: + // https://github.com/malsup/form/commit/588306aedba1de01388032d5f42a60159eea9228#commitcomment-2180219 + var fileInputs = $('input[type=file]:enabled:not([value=""])', this); + + var hasFileInputs = fileInputs.length > 0; + var mp = 'multipart/form-data'; + var multipart = ($form.attr('enctype') == mp || $form.attr('encoding') == mp); + + var fileAPI = feature.fileapi && feature.formdata; + log("fileAPI :" + fileAPI); + var shouldUseFrame = (hasFileInputs || multipart) && !fileAPI; + + var jqxhr; + + // options.iframe allows user to force iframe mode + // 06-NOV-09: now defaulting to iframe mode if file input is detected + if (options.iframe !== false && (options.iframe || shouldUseFrame)) { + // hack to fix Safari hang (thanks to Tim Molendijk for this) + // see: http://groups.google.com/group/jquery-dev/browse_thread/thread/36395b7ab510dd5d + if (options.closeKeepAlive) { + $.get(options.closeKeepAlive, function() { + jqxhr = fileUploadIframe(a); + }); + } + else { + jqxhr = fileUploadIframe(a); + } + } + else if ((hasFileInputs || multipart) && fileAPI) { + jqxhr = fileUploadXhr(a); + } + else { + jqxhr = $.ajax(options); + } + + $form.removeData('jqxhr').data('jqxhr', jqxhr); + + // clear element array + for (var k=0; k < elements.length; k++) + elements[k] = null; + + // fire 'notify' event + this.trigger('form-submit-notify', [this, options]); + return this; + + // utility fn for deep serialization + function deepSerialize(extraData){ + var serialized = $.param(extraData, options.traditional).split('&'); + var len = serialized.length; + var result = []; + var i, part; + for (i=0; i < len; i++) { + // #252; undo param space replacement + serialized[i] = serialized[i].replace(/\+/g,' '); + part = serialized[i].split('='); + // #278; use array instead of object storage, favoring array serializations + result.push([decodeURIComponent(part[0]), decodeURIComponent(part[1])]); + } + return result; + } + + // XMLHttpRequest Level 2 file uploads (big hat tip to francois2metz) + function fileUploadXhr(a) { + var formdata = new FormData(); + + for (var i=0; i < a.length; i++) { + formdata.append(a[i].name, a[i].value); + } + + if (options.extraData) { + var serializedData = deepSerialize(options.extraData); + for (i=0; i < serializedData.length; i++) + if (serializedData[i]) + formdata.append(serializedData[i][0], serializedData[i][1]); + } + + options.data = null; + + var s = $.extend(true, {}, $.ajaxSettings, options, { + contentType: false, + processData: false, + cache: false, + type: method || 'POST' + }); + + if (options.uploadProgress) { + // workaround because jqXHR does not expose upload property + s.xhr = function() { + var xhr = $.ajaxSettings.xhr(); + if (xhr.upload) { + xhr.upload.addEventListener('progress', function(event) { + var percent = 0; + var position = event.loaded || event.position; /*event.position is deprecated*/ + var total = event.total; + if (event.lengthComputable) { + percent = Math.ceil(position / total * 100); + } + options.uploadProgress(event, position, total, percent); + }, false); + } + return xhr; + }; + } + + s.data = null; + var beforeSend = s.beforeSend; + s.beforeSend = function(xhr, o) { + o.data = formdata; + if(beforeSend) + beforeSend.call(this, xhr, o); + }; + return $.ajax(s); + } + + // private function for handling file uploads (hat tip to YAHOO!) + function fileUploadIframe(a) { + var form = $form[0], el, i, s, g, id, $io, io, xhr, sub, n, timedOut, timeoutHandle; + var deferred = $.Deferred(); + + // #341 + deferred.abort = function(status) { + xhr.abort(status); + }; + + if (a) { + // ensure that every serialized input is still enabled + for (i=0; i < elements.length; i++) { + el = $(elements[i]); + if ( hasProp ) + el.prop('disabled', false); + else + el.removeAttr('disabled'); + } + } + + s = $.extend(true, {}, $.ajaxSettings, options); + s.context = s.context || s; + id = 'jqFormIO' + (new Date().getTime()); + if (s.iframeTarget) { + $io = $(s.iframeTarget); + n = $io.attr2('name'); + if (!n) + $io.attr2('name', id); + else + id = n; + } + else { + $io = $('