Upload Multiple Files with One File Input

Reference:

http://stackoverflow.com/questions/11524356/multiple-files-upload-array-with-codeigniter-2-0

HTML:

&lt;div class=&quot;upload&quot;&gt;
	&lt;input type=&quot;file&quot; name=&quot;product_photo[]&quot; value=&quot;&quot; id=&quot;product_photo&quot; class=&quot;upload_field&quot; multiple=&quot;multiple&quot;&gt;
	&lt;button class=&quot;button bt_upload active&quot;&gt;Upload&lt;/button&gt;
&lt;/div&gt;

<button class="button bt_upload active">Upload</button>

</div>

CSS:

.wlightbox.new_post .upload .upload_field{
	/* Note: display:none on the input won&#39;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;
}

.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:

var post_fun = {
  init: function(){
    var wrapper = this; 

    $(&#39;#bt_post&#39;).on(&#39;click&#39;, function(e){
      e.preventDefault();
      $(&#39;#win_new_post&#39;).wlightbox(&#39;show&#39;);
      //$(&#39;#win_friends_console .left .tabs li:first a&#39;).trigger(&#39;click&#39;);
    });

    wrapper.init_upload_form();
  }, 
  init_upload_form: function(){
    var $form = $(&#39;#product_photo_form&#39;);
    var $upload_field = $(&#39;#product_photo&#39;);
    var $upload_button = $(&#39;#win_new_post .bt_upload&#39;);
    var $submit_button = $form.find(&#39;.bt_submit&#39;);

    $upload_button.on(&#39;click&#39;, function(e){
      e.preventDefault();
      $upload_field.trigger(&#39;click&#39;);
    });

    //No submit button for now
    $submit_button.on(&#39;click&#39;, function(e){
      e.preventDefault();
      $form.submit();
    });

    $upload_field.on(&#39;change&#39;, function(){
      var value = $(this).val();
      //console.log(&#39;file selected: &#39; + value);return;
      if(value != null &amp;&amp; value.length &gt; 0){
        $form.submit();
      }
    });

    $form.submit(function() { 
      $(this).ajaxSubmit({
          beforeSubmit: function(arr, $form, options) {
              for(var i = 0; i &lt; arr.length; i++){
                  var obj = arr[i];
   
                  if(obj.required == true &amp;&amp; (obj.value == null || obj.value == &#39;&#39;)){
                      alert(&#39;Please enter all required fields&#39;);
                      return false;
                  }
              }
   
              //$(&#39;#bt_submit&#39;).text(&#39;Processing...&#39;).attr(&#39;disabled&#39;, true);
              return true;
          }, 
          data: {
              
          }, 
          success: function(data, statusText, xhr, $form) { 
            //console.log(data);return;
            if(typeof data.status == &#39;undefined&#39;){
                show_msg(&#39;Error&#39;, data);
            }else if(data.status == &#39;success&#39;){
                show_msg(&#39;Info&#39;, &#39;Settings has been updated&#39;);
                refresh();
            }else{
                show_error(&#39;Error&#39;, data.response);
            }
          }, 
          error: function(){
              alert(&quot;ERROR&quot;);
          }
      }); 
   
      return false; 
    });
  }
}

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:

Array(    
	[product_photo] =&gt; Array        (            
		[name] =&gt; Array                (
			[0] =&gt; 156218_3965771977465_479668037_n.jpg                    
			[1] =&gt; hugs05.jpg                
		)            
		[type] =&gt; Array                (                    
			[0] =&gt; image/jpeg                    
			[1] =&gt; image/jpeg                
		)            
		[tmp_name] =&gt; Array                (                    
			[0] =&gt; /tmp/phpl1Mks4                    
			[1] =&gt; /tmp/phpjfhlBJ                
		)            
		[error] =&gt; Array                (                    
			[0] =&gt; 0                    
			[1] =&gt; 0                
		)            
		[size] =&gt; Array                (                    
			[0] =&gt; 129538                    
			[1] =&gt; 30443                
		)        
	)
)

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

)

M	T	W	T	F	S	S
			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

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Upload Multiple Files with One File Input