Reference:
HTML:
1 2 3 4 |
<div class="upload"> <input type="file" name="product_photo[]" value="" id="product_photo" class="upload_field" multiple="multiple"> <button class="button bt_upload active">Upload</button> </div> |
CSS:
1 2 3 4 5 6 7 8 9 |
.wlightbox.new_post .upload .upload_field{ /* Note: display:none on the input won't trigger the click event in WebKit. Setting visibility: hidden and height/width:0 works great. http://ericbidelman.tumblr.com/post/14636214755/making-file-inputs-a-pleasure-to-look-at */ visibility: hidden; width: 0; height: 0; } |
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
var post_fun = { init: function(){ var wrapper = this; $('#bt_post').on('click', function(e){ e.preventDefault(); $('#win_new_post').wlightbox('show'); //$('#win_friends_console .left .tabs li:first a').trigger('click'); }); wrapper.init_upload_form(); }, init_upload_form: function(){ var $form = $('#product_photo_form'); var $upload_field = $('#product_photo'); var $upload_button = $('#win_new_post .bt_upload'); var $submit_button = $form.find('.bt_submit'); $upload_button.on('click', function(e){ e.preventDefault(); $upload_field.trigger('click'); }); //No submit button for now $submit_button.on('click', function(e){ e.preventDefault(); $form.submit(); }); $upload_field.on('change', function(){ var value = $(this).val(); //console.log('file selected: ' + value);return; if(value != null && value.length > 0){ $form.submit(); } }); $form.submit(function() { $(this).ajaxSubmit({ beforeSubmit: function(arr, $form, options) { for(var i = 0; i < arr.length; i++){ var obj = arr[i]; if(obj.required == true && (obj.value == null || obj.value == '')){ alert('Please enter all required fields'); return false; } } //$('#bt_submit').text('Processing...').attr('disabled', true); return true; }, data: { }, success: function(data, statusText, xhr, $form) { //console.log(data);return; if(typeof data.status == 'undefined'){ show_msg('Error', data); }else if(data.status == 'success'){ show_msg('Info', 'Settings has been updated'); refresh(); }else{ show_error('Error', data.response); } }, error: function(){ alert("ERROR"); } }); return false; }); } } |
PHP vlaues of $_FILES:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Array( [product_photo] => Array ( [name] => Array ( [0] => 156218_3965771977465_479668037_n.jpg [1] => hugs05.jpg ) [type] => Array ( [0] => image/jpeg [1] => image/jpeg ) [tmp_name] => Array ( [0] => /tmp/phpl1Mks4 [1] => /tmp/phpjfhlBJ ) [error] => Array ( [0] => 0 [1] => 0 ) [size] => Array ( [0] => 129538 [1] => 30443 ) ) ) |