├── README └── jquery.ajaxfileupload.js /README: -------------------------------------------------------------------------------- 1 | This plugin uploads the file somehwere, and passes the 2 | response to a callback, nothing else. 3 | 4 | - It does not depend on specific HTML, just give it a `` 5 | - It does not require your server to respond in any particular way 6 | - It does not matter how many files you use, or where they are on the page 7 | 8 | -- Use as little as -- 9 | 10 | $('#one-specific-file').ajaxfileupload({ 11 | 'action': '/upload.php' 12 | }); 13 | 14 | -- or as much as -- 15 | 16 | $('input[type="file"]').ajaxfileupload({ 17 | 'action': '/upload.php', 18 | 'params': { 19 | 'extra': 'info' 20 | }, 21 | 'onComplete': function(response) { 22 | console.log('custom handler for file:'); 23 | alert(JSON.stringify(response)); 24 | }, 25 | 'onStart': function() { 26 | if(weWantedTo) return false; // cancels upload 27 | }, 28 | 'onCancel': function() { 29 | console.log('no file selected'); 30 | } 31 | }); 32 | 33 | 34 | * Copyright (c) 2011 Jordan Feldstein 35 | 36 | 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: 37 | 38 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 39 | 40 | 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. 41 | -------------------------------------------------------------------------------- /jquery.ajaxfileupload.js: -------------------------------------------------------------------------------- 1 | /* 2 | // jQuery Ajax File Uploader 3 | // 4 | // @author: Jordan Feldstein 5 | // 6 | // - Ajaxifies an individual 7 | // - Files are sandboxed. Doesn't matter how many, or where they are, on the page. 8 | // - Allows for extra parameters to be included with the file 9 | // - onStart callback can cancel the upload by returning false 10 | */ 11 | 12 | 13 | (function($) { 14 | $.fn.ajaxfileupload = function(options) { 15 | var settings = { 16 | params: {}, 17 | action: '', 18 | onStart: function() { console.log('starting upload'); console.log(this); }, 19 | onComplete: function(response) { console.log('got response: '); console.log(response); console.log(this); }, 20 | onCancel: function() { console.log('cancelling: '); console.log(this); }, 21 | validate_extensions : true, 22 | valid_extensions : ['gif','png','jpg','jpeg'], 23 | submit_button : null 24 | }; 25 | 26 | var uploading_file = false; 27 | 28 | if ( options ) { 29 | $.extend( settings, options ); 30 | } 31 | 32 | 33 | // 'this' is a jQuery collection of one or more (hopefully) 34 | // file elements, but doesn't check for this yet 35 | return this.each(function() { 36 | var $element = $(this); 37 | 38 | // Skip elements that are already setup. May replace this 39 | // with uninit() later, to allow updating that settings 40 | if($element.data('ajaxUploader-setup') === true) return; 41 | 42 | $element.change(function() 43 | { 44 | // since a new image was selected, reset the marker 45 | uploading_file = false; 46 | 47 | // only update the file from here if we haven't assigned a submit button 48 | if (settings.submit_button == null) 49 | { 50 | upload_file(); 51 | } 52 | }); 53 | 54 | if (settings.submit_button == null) 55 | { 56 | // do nothing 57 | } else 58 | { 59 | settings.submit_button.click(function(e) 60 | { 61 | // Prevent non-AJAXy submit 62 | e.preventDefault(); 63 | 64 | // only attempt to upload file if we're not uploading 65 | if (!uploading_file) 66 | { 67 | upload_file(); 68 | } 69 | }); 70 | } 71 | 72 | var upload_file = function() 73 | { 74 | if($element.val() == '') return settings.onCancel.apply($element, [settings.params]); 75 | 76 | // make sure extension is valid 77 | var ext = $element.val().split('.').pop().toLowerCase(); 78 | if(true === settings.validate_extensions && $.inArray(ext, settings.valid_extensions) == -1) 79 | { 80 | // Pass back to the user 81 | settings.onComplete.apply($element, [{status: false, message: 'The select file type is invalid. File must be ' + settings.valid_extensions.join(', ') + '.'}, settings.params]); 82 | } else 83 | { 84 | uploading_file = true; 85 | 86 | // Creates the form, extra inputs and iframe used to 87 | // submit / upload the file 88 | wrapElement($element); 89 | 90 | // Call user-supplied (or default) onStart(), setting 91 | // it's this context to the file DOM element 92 | var ret = settings.onStart.apply($element, [settings.params]); 93 | 94 | // let onStart have the option to cancel the upload 95 | if(ret !== false) 96 | { 97 | $element.parent('form').submit(function(e) { e.stopPropagation(); }).submit(); 98 | } 99 | } 100 | }; 101 | 102 | // Mark this element as setup 103 | $element.data('ajaxUploader-setup', true); 104 | 105 | /* 106 | // Internal handler that tries to parse the response 107 | // and clean up after ourselves. 108 | */ 109 | var handleResponse = function(loadedFrame, element) { 110 | var response, responseStr = loadedFrame.contentWindow.document.body.innerHTML; 111 | try { 112 | //response = $.parseJSON($.trim(responseStr)); 113 | response = JSON.parse(responseStr); 114 | } catch(e) { 115 | response = responseStr; 116 | } 117 | 118 | // Tear-down the wrapper form 119 | element.siblings().remove(); 120 | element.unwrap(); 121 | 122 | uploading_file = false; 123 | 124 | // Pass back to the user 125 | settings.onComplete.apply(element, [response, settings.params]); 126 | }; 127 | 128 | /* 129 | // Wraps element in a
tag, and inserts hidden inputs for each 130 | // key:value pair in settings.params so they can be sent along with 131 | // the upload. Then, creates an iframe that the whole thing is 132 | // uploaded through. 133 | */ 134 | var wrapElement = function(element) { 135 | // Create an iframe to submit through, using a semi-unique ID 136 | var frame_id = 'ajaxUploader-iframe-' + Math.round(new Date().getTime() / 1000) 137 | $('body').after('