Cómo manejar la carga de archivos múltiples usando PHP

Question

Quiero subir archivos usando PHP pero el problema es que no sé cuántos archivos subiré.

Mi pregunta es ¿cómo puedo cargar archivos si uso file[]?

<form action="upload.php" method="post" enctype="multipart/form-data"> 
<label for="file">Filename:</label><input type="file" name="file[]" id="file" /> 
<br /> 
<label for="file">Filename:</label><input type="file" name="file[]" id="file" /> 
<br /> 
<input type="submit" name="submit" value="Submit" /> 
</form> 

voy a añadir simplemente caja de archivo y voy a utilizar JavaScript para crear más de entrada de archivo a subir, pero el cómo manejarlos en PHP?

Answer 1

Ver: $_FILES, Handling file uploads

<?php 
    if(isset($_FILES['file']['tmp_name'])) 
    { 
     // Number of uploaded files 
     $num_files = count($_FILES['file']['tmp_name']); 

     /** loop through the array of files ***/ 
     for($i=0; $i < $num_files;$i++) 
     { 
      // check if there is a file in the array 
      if(!is_uploaded_file($_FILES['file']['tmp_name'][$i])) 
      { 
       $messages[] = 'No file uploaded'; 
      } 
      else 
      { 
       // copy the file to the specified dir 
       if(@copy($_FILES['file']['tmp_name'][$i],$upload_dir.'/'.$_FILES['file']['name'][$i])) 
       { 
        /*** give praise and thanks to the php gods ***/ 
        $messages[] = $_FILES['file']['name'][$i].' uploaded'; 
       } 
       else 
       { 
        /*** an error message ***/ 
        $messages[] = 'Uploading '.$_FILES['file']['name'][$i].' Failed'; 
       } 
      } 
     } 
    } 
?> 

Answer 2

Este es un método preferido de la mía. Incluye un inserto mysql para mantener una tabla en las imágenes cargadas. También mueve la imagen a la carpeta de la imagen de administrador y copia la imagen a la carpeta de imágenes de sitios del usuario.

<?php 
if(isset($_FILES['image']['tmp_name'])) 
{ 
    $num_files = count($_FILES['image']['tmp_name']); 
    for($x =0; $x< $num_files;$x++){ 
     $image = $_FILES['image']['name'][$x]; 
     if(!is_uploaded_file($_FILES['image']['tmp_name'][$x])) 
     { 
      $messages[] = $image.' No file uploaded."<br>"'; 
     } 
     if (move_uploaded_file($_FILES["image"]["tmp_name"][$x],"images/". $image)){ 
      $messages[] = $image .' uploaded'; 
     } 
     copy("images/".$image, '../images/'.$image); 
     mysql_query("INSERT INTO $table_name VALUES ('NULL','$id','images/$image')"); 
    } 
} 
?> 
<?php /*insert this into the form*/ 
$count= count($messages); for ($i =0; $i < $count; $i++){echo $messages[$i]."<br>";} 
    ?> 

Answer 3

Prueba esto:

if(isset($_FILES['image_file'])) { 
    $file = $_FILES['image_file']; 
    for($i = 0; $i < count($file['name']); $i++){ 
     $image = array(
      'name' => $file['name'][$i], 
      'type' => $file['type'][$i], 
      'size' => $file['size'][$i], 
      'tmp_name' => $file['tmp_name'][$i], 
      'error' => $file['error'][$i] 
     ); 
// Here is your code to handle one file 
} 

En su código, sólo tiene que utilizar '$ imagen' en lugar de '$ _FILES' ...

Answer 4

Ajax js

(function(){ 

var d = document, w = window; 

/** 
* Get element by id 
*/ 
function get(element){ 
    if (typeof element == "string") 
     element = d.getElementById(element); 
    return element; 
} 

/** 
* Attaches event to a dom element 
*/ 
function addEvent(el, type, fn){ 
    if (w.addEventListener){ 
     el.addEventListener(type, fn, false); 
    } else if (w.attachEvent){ 
     var f = function(){ 
     fn.call(el, w.event); 
     };   
     el.attachEvent('on' + type, f) 
    } 
} 


/** 
* Creates and returns element from html chunk 
*/ 
var toElement = function(){ 
    var div = d.createElement('div'); 
    return function(html){ 
     div.innerHTML = html; 
     var el = div.childNodes[0]; 
     div.removeChild(el); 
     return el; 
    } 
}(); 

function hasClass(ele,cls){ 
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 
function addClass(ele,cls) { 
    if (!hasClass(ele,cls)) ele.className += " "+cls; 
} 
function removeClass(ele,cls) { 
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
    ele.className=ele.className.replace(reg,' '); 
} 


if (document.documentElement["getBoundingClientRect"]){ 

    var getOffset = function(el){ 
     var box = el.getBoundingClientRect(), 
     doc = el.ownerDocument, 
     body = doc.body, 
     docElem = doc.documentElement, 

     // for ie 
     clientTop = docElem.clientTop || body.clientTop || 0, 
     clientLeft = docElem.clientLeft || body.clientLeft || 0, 

     // In Internet Explorer 7 getBoundingClientRect property is treated as physical, 
     // while others are logical. Make all logical, like in IE8. 


     zoom = 1; 
     if (body.getBoundingClientRect) { 
      var bound = body.getBoundingClientRect(); 
      zoom = (bound.right - bound.left)/body.clientWidth; 
     } 
     if (zoom > 1){ 
      clientTop = 0; 
      clientLeft = 0; 
     } 
     var top = box.top/zoom + (window.pageYOffset || docElem && docElem.scrollTop/zoom || body.scrollTop/zoom) - clientTop, 
     left = box.left/zoom + (window.pageXOffset|| docElem && docElem.scrollLeft/zoom || body.scrollLeft/zoom) - clientLeft; 

     return { 
      top: top, 
      left: left 
     }; 
    } 

} else { 
    // Get offset adding all offsets 
    var getOffset = function(el){ 
     if (w.jQuery){ 
      return jQuery(el).offset(); 
     }  

     var top = 0, left = 0; 
     do { 
      top += el.offsetTop || 0; 
      left += el.offsetLeft || 0; 
     } 
     while (el = el.offsetParent); 

     return { 
      left: left, 
      top: top 
     }; 
    } 
} 

function getBox(el){ 
    var left, right, top, bottom; 
    var offset = getOffset(el); 
    left = offset.left; 
    top = offset.top; 

    right = left + el.offsetWidth; 
    bottom = top + el.offsetHeight;  

    return { 
     left: left, 
     right: right, 
     top: top, 
     bottom: bottom 
    }; 
} 

/** 
* Crossbrowser mouse coordinates 
*/ 
function getMouseCoords(e){  

    if (!e.pageX && e.clientX){ 
     // In Internet Explorer 7 some properties (mouse coordinates) are treated as physical, 
     // while others are logical (offset). 
     var zoom = 1; 
     var body = document.body; 

     if (body.getBoundingClientRect) { 
      var bound = body.getBoundingClientRect(); 
      zoom = (bound.right - bound.left)/body.clientWidth; 
     } 

     return { 
      x: e.clientX/zoom + d.body.scrollLeft + d.documentElement.scrollLeft, 
      y: e.clientY/zoom + d.body.scrollTop + d.documentElement.scrollTop 
     }; 
    } 

    return { 
     x: e.pageX, 
     y: e.pageY 
    };  

} 
/** 
* Function generates unique id 
*/  
var getUID = function(){ 
    var id = 0; 
    return function(){ 
     return 'ValumsAjaxUpload' + id++; 
    } 
}(); 

function fileFromPath(file){ 
    return file.replace(/.*(\/|\\)/, "");   
} 

function getExt(file){ 
    return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : ''; 
}   

// Please use AjaxUpload , Ajax_upload will be removed in the next version 
Ajax_upload = AjaxUpload = function(button, options){ 
    if (button.jquery){ 
     // jquery object was passed 
     button = button[0]; 
    } else if (typeof button == "string" && /^#.*/.test(button)){     
     button = button.slice(1);    
    } 
    button = get(button); 

    this._input = null; 
    this._button = button; 
    this._disabled = false; 
    this._submitting = false; 
    // Variable changes to true if the button was clicked 
    // 3 seconds ago (requred to fix Safari on Mac error) 
    this._justClicked = false; 
    this._parentDialog = d.body; 

    if (window.jQuery && jQuery.ui && jQuery.ui.dialog){ 
     var parentDialog = jQuery(this._button).parents('.ui-dialog'); 
     if (parentDialog.length){ 
      this._parentDialog = parentDialog[0]; 
     } 
    }   

    this._settings = { 
     // Location of the server-side upload script 
     action: 'upload.php',   
     // File upload name 
     name: 'userfile', 
     // Additional data to send 
     data: {}, 
     // Submit file as soon as it's selected 
     autoSubmit: true, 
     // The type of data that you're expecting back from the server. 
     // Html and xml are detected automatically. 
     // Only useful when you are using json data as a response. 
     // Set to "json" in that case. 
     responseType: false, 
     // When user selects a file, useful with autoSubmit disabled    
     onChange: function(file, extension){},     
     // Callback to fire before file is uploaded 
     // You can return false to cancel upload 
     onSubmit: function(file, extension){}, 
     // Fired when file upload is completed 
     // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE! 
     onComplete: function(file, response) {} 
    }; 

    // Merge the users options with our defaults 
    for (var i in options) { 
     this._settings[i] = options[i]; 
    } 

    this._createInput(); 
    this._rerouteClicks(); 
} 

// assigning methods to our class 
AjaxUpload.prototype = { 
    setData : function(data){ 
     this._settings.data = data; 
    }, 
    disable : function(){ 
     this._disabled = true; 
    }, 
    enable : function(){ 
     this._disabled = false; 
    }, 
    // removes ajaxupload 
    destroy : function(){ 
     if(this._input){ 
      if(this._input.parentNode){ 
       this._input.parentNode.removeChild(this._input); 
      } 
      this._input = null; 
     } 
    },    
    /** 
    * Creates invisible file input above the button 
    */ 
    _createInput : function(){ 
     var self = this; 
     var input = d.createElement("input"); 
     input.setAttribute('type', 'file'); 
     input.setAttribute('name', this._settings.name); 
     var styles = { 
      'position' : 'absolute' 
      ,'margin': '-5px 0 0 -175px' 
      ,'padding': 0 
      ,'width': '220px' 
      ,'height': '30px' 
      ,'fontSize': '14px'        
      ,'opacity': 0 
      ,'cursor': 'pointer' 
      ,'display' : 'none' 
      ,'zIndex' : 2147483583 //Max zIndex supported by Opera 9.0-9.2x 
      // Strange, I expected 2147483647     
     }; 
     for (var i in styles){ 
      input.style[i] = styles[i]; 
     } 

     // Make sure that element opacity exists 
     // (IE uses filter instead) 
     if (! (input.style.opacity === "0")){ 
      input.style.filter = "alpha(opacity=0)"; 
     } 

     this._parentDialog.appendChild(input); 

     addEvent(input, 'change', function(){ 
      // get filename from input 
      var file = fileFromPath(this.value);  
      if(self._settings.onChange.call(self, file, getExt(file)) == false){ 
       return;    
      }              
      // Submit form when value is changed 
      if (self._settings.autoSubmit){ 
       self.submit();      
      }      
     }); 

     // Fixing problem with Safari 
     // The problem is that if you leave input before the file select dialog opens 
     // it does not upload the file. 
     // As dialog opens slowly (it is a sheet dialog which takes some time to open) 
     // there is some time while you can leave the button. 
     // So we should not change display to none immediately 
     addEvent(input, 'click', function(){ 
      self.justClicked = true; 
      setTimeout(function(){ 
       // we will wait 3 seconds for dialog to open 
       self.justClicked = false; 
      }, 3000);   
     });  

     this._input = input; 
    }, 
    _rerouteClicks : function(){ 
     var self = this; 

     // IE displays 'access denied' error when using this method 
     // other browsers just ignore click() 
     // addEvent(this._button, 'click', function(e){ 
     // self._input.click(); 
     // }); 

     var box, dialogOffset = {top:0, left:0}, over = false;       
     addEvent(self._button, 'mouseover', function(e){ 
      if (!self._input || over) return; 
      over = true; 
      box = getBox(self._button); 

      if (self._parentDialog != d.body){ 
       dialogOffset = getOffset(self._parentDialog); 
      } 
     }); 


     // we can't use mouseout on the button, 
     // because invisible input is over it 
     addEvent(document, 'mousemove', function(e){ 
      var input = self._input;    
      if (!input || !over) return; 

      if (self._disabled){ 
       removeClass(self._button, 'hover'); 
       input.style.display = 'none'; 
       return; 
      } 

      var c = getMouseCoords(e); 

      if ((c.x >= box.left) && (c.x <= box.right) && 
      (c.y >= box.top) && (c.y <= box.bottom)){   
       input.style.top = c.y - dialogOffset.top + 'px'; 
       input.style.left = c.x - dialogOffset.left + 'px'; 
       input.style.display = 'block'; 
       addClass(self._button, 'hover');     
      } else {   
       // mouse left the button 
       over = false; 
       if (!self.justClicked){ 
        input.style.display = 'none'; 
       } 
       removeClass(self._button, 'hover'); 
      }   
     });   

    }, 
    /** 
    * Creates iframe with unique name 
    */ 
    _createIframe : function(){ 
     // unique name 
     // We cannot use getTime, because it sometimes return 
     // same value in safari :(
     var id = getUID(); 


     var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />'); 
     iframe.id = id; 
     iframe.style.display = 'none'; 
     d.body.appendChild(iframe);   
     return iframe;      
    }, 
    /** 
    * Upload file without refreshing the page 
    */ 
    submit : function(){ 
     var self = this, settings = this._settings; 

     if (this._input.value === ''){ 
      // there is no file 
      return; 
     } 

     // get filename from input 
     var file = fileFromPath(this._input.value);   

     // execute user event 
     if (! (settings.onSubmit.call(this, file, getExt(file)) == false)) { 
      // Create new iframe for this submission 
      var iframe = this._createIframe(); 

      // Do not submit if user function returns false          
      var form = this._createForm(iframe); 
      form.appendChild(this._input); 

      form.submit(); 

      d.body.removeChild(form);    
      form = null; 
      this._input = null; 

      // create new input 
      this._createInput(); 

      var toDeleteFlag = false; 

      addEvent(iframe, 'load', function(e){ 

       if (// For Safari 
        iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || 
        // For FF, IE 
        iframe.src == "javascript:'<html></html>';"){      

        // First time around, do not delete. 
        if(toDeleteFlag){ 
         // Fix busy state in FF3 
         setTimeout(function() { 
          d.body.removeChild(iframe); 
         }, 0); 
        } 
        return; 
       }    

       var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; 

       // fixing Opera 9.26 
       if (doc.readyState && doc.readyState != 'complete'){ 
        // Opera fires load event multiple times 
        // Even when the DOM is not ready yet 
        // this fix should not affect other browsers 
        return; 
       } 

       // fixing Opera 9.64 
       if (doc.body && doc.body.innerHTML == "false"){ 
        // In Opera 9.64 event was fired second time 
        // when body.innerHTML changed from false 
        // to server response approx. after 1 sec 
        return;    
       } 

       var response; 

       if (doc.XMLDocument){ 
        // response is a xml document IE property 
        response = doc.XMLDocument; 
       } else if (doc.body){ 
        // response is html document or plain text 
        response = doc.body.innerHTML; 
        if (settings.responseType && settings.responseType.toLowerCase() == 'json'){ 
         // If the document was sent as 'application/javascript' or 
         // 'text/javascript', then the browser wraps the text in a <pre> 
         // tag and performs html encoding on the contents. In this case, 
         // we need to pull the original text content from the text node's 
         // nodeValue property to retrieve the unmangled content. 
         // Note that IE6 only understands text/html 
         if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE'){ 
          response = doc.body.firstChild.firstChild.nodeValue; 
         } 
         if (response) { 
          response = window["eval"]("(" + response + ")"); 
         } else { 
          response = {}; 
         } 
        } 
       } else { 
        // response is a xml document 
        var response = doc; 
       } 

       settings.onComplete.call(self, file, response); 

       // Reload blank page, so that reloading main page 
       // does not re-submit the post. Also, remember to 
       // delete the frame 
       toDeleteFlag = true; 

       // Fix IE mixed content issue 
       iframe.src = "javascript:'<html></html>';";          
      }); 

     } else { 
      // clear input to allow user to select same file 
      // Doesn't work in IE6 
      // this._input.value = ''; 
      d.body.removeChild(this._input);     
      this._input = null; 

      // create new input 
      this._createInput();       
     } 
    },  
    /** 
    * Creates form, that will be submitted to iframe 
    */ 
    _createForm : function(iframe){ 
     var settings = this._settings; 

     // method, enctype must be specified here 
     // because changing this attr on the fly is not allowed in IE 6/7  
     var form = toElement('<form method="post" enctype="multipart/form-data"></form>'); 
     form.style.display = 'none'; 
     form.action = settings.action; 
     form.target = iframe.name; 
     d.body.appendChild(form); 

     // Create hidden input element for each data key 
     for (var prop in settings.data){ 
      var el = d.createElement("input"); 
      el.type = 'hidden'; 
      el.name = prop; 
      el.value = settings.data[prop]; 
      form.appendChild(el); 
     }   
     return form; 
    } 
}; 
})(); 

código jQuery para cargar

$(document).ready(function() { 

    var btnUpload=$('#browse'); 
      $("#hidauto").css('display','block'); 
     new AjaxUpload(btnUpload, { 
      action: '<?=site_url('brand/upload_image1/')?>', 
      name: 'file', 
      onSubmit: function(file, ext){$("#loadgif1").css("display","block"); 

        if (! (ext && /^(jpg|jpeg|gif|png)$/.test(ext))){ 

         // extension is not allowed 
        //document.getElementById("loadgif").style.display='block'; 
        $("#loadgif1").css("display","none"); 
        $("#image").css("display","block"); 

       $("#image").html("only jpg,jpeg,png, images are allowed"); 

         return false; 

        } 
      }, 
      onComplete: function(file, response){ 
      //alert(response); 
    if(response=='0'){ 
      $("#primimage1_error").html("This image is too small please upload a bigger one"); 
          $("#loadgif1").css("display","none"); 

      return false; 
    } 
      $("#hidauto").css('display','block'); 
      $("#loadgif1").css("display","none"); 
      $("#image").html(""); 
      var r=response; 
      //document.getElementById("imghid").value=response; 
      divid=r.replace(new RegExp(".jpg", 'g'),''); 
      divid=divid.replace(new RegExp(".jpeg", 'g'),''); 
      divid=divid.replace(new RegExp(".png", 'g'),''); 
      //alert(divid);  
      document.getElementById("imghidall").value=document.getElementById("imghidall").value+response+","; 
      shw='<div style="float: left; height:135px; width:147px;" id='+divid+'><img src="<?php echo base_url();?>uploads/'+response+'" width="125px" height="115px" /><div style="width: 125px;"><input type="radio" name="checkPrimary" title="Set as Primary image" value="'+divid+'" onClick="primaryimg('+"'"+r+"'"+');" style="margin:5px"><img src="<?php echo base_url();?>images/img_delete.png" width="17px" height="17px" title="delete" onClick="delete_image('+"'"+r+"'"+');" width="15px;" height="15px" style="float:right; margin-top:3px;"></div></div>'; 
      //  shw='<div style="float: left; height:135px; width:147px;" id='+divid+'><img src="<?php echo base_url();?>uploads/'+response+'" width="125px" height="115px" /><div style="width: 125px;"><input type="checkbox" id="checkPrimary" value="'+divid+'" onClick="primaryimg('+"'"+r+"'"+');" style="margin:5px"><img src="<?php echo base_url();?>images/remove.png" title="delete" onClick="delete_image('+"'"+r+"'"+');" width="15px;" height="15px" style="float:right; margin-top:2px;"></div></div>'; 
         //alert(shw); 
         $("#hidauto").append(shw); 
        $("#primimage1_error").html(""); 
         //location.reload(); 
      } 
     }); 
     }); 

Código HTML

<div class="r8_prt" style="margin-right: 0px; margin-top: 10px;"> 
    <div class="line1"> 
     <label style="float: left; width: 121px; margin-right:10%;">Upload images&nbsp;:&nbsp;</label><input type="file" name="browse" id="browse" multiple="true" style="float: left;"> 
     <label class="error" for="dwn" id="allimg_error" style="display:block; color: #B94A48;font-size: 11px;font-weight: bold; text-align:center;" ></label> 
     <label class="error" for="dwn" id="primimage1_error" style="display:block; color: #B94A48;font-size: 11px;font-weight: bold; text-align:center;" ></label> 
     <label id="loadgif1" style="display:none; width:10px; float:left"><img style="margin-top:-10px" src="<?php echo base_url();?>images/ajax-loader(2).gif"></label> 
     <div id="image" style="float:left; width:110%; margin-top:20px; color:#F00;"> 


     </div> 
     <div id="hidauto"> 

       </div> 
     <input type="hidden" value="" id="imghid" name="imghid"> 
     <input type="hidden" value="" id="imghidall" name="imghidall"> 
    </div> 
</div> 

función de carga (Para CodeIgniter)

function upload_image1() { 
    $ext=$_FILES['file']['name']; 
      $epld=explode('.',$ext); 
     $nn= count($epld);$nn-=1; 
      $photo=date("MdyHis").".".$epld[$nn];  
    $data = getimagesize($_FILES['file']['tmp_name']); 
      $width = $data[0]; 
      $height = $data[1]; if($width<250 || $height<250){ echo 0; die(); } 


     if( move_uploaded_file($_FILES['file']['tmp_name'],"./uploads/".$photo)){ 

$config['upload_path'] = './uploads/'; 
$config['allowed_types'] = 'gif|jpg|png'; 
$config['max_size'] = '15360'; //15MB 
$config['max_width'] = '0';//'2000' 
$config['max_height'] = '0';//'2000' 
$config['min_width'] = '250';//'2000'  
$config['min_height'] = '250';//'2000' 
$this->load->library('upload', $config); 
echo $photo; 
    } } 

imagen Eliminar

function delete_image(name) 
    { 
    var answer = confirm ("Do you want to delete this image?") 
    if (!answer) 
       { 
       } 
    else{ 


      var base_url="<?php echo base_url();?>"; 
     $.ajax 
     ({ 
      type: "POST", 
      url: base_url+"index.php/brand/delete_image/?imgname="+name, 
      data:'', 
      success: function(view) 
      { 
      name=name+","; 
      allname=document.getElementById("imghidall").value; 
      e=document.getElementById("imghidall").value = allname.replace(new RegExp(name, 'g'),''); 

      divid=name.replace(new RegExp(".jpg,", 'g'),''); 
      divid=divid.replace(new RegExp(".jpeg,", 'g'),''); 
      divid=divid.replace(new RegExp(".png,", 'g'),''); 
      //alert(divid); 
      document.getElementById(divid).innerHTML=""; 
      $("#"+divid).css('width','0px'); 

      } 
     }); 
     } 
    } 

función Borrar imagen

function delete_image(){ 
    $file_name=$_GET['imgname']; 
    unlink(FCPATH . '/uploads/' . $file_name); 
    unlink(FCPATH . '/uploads/thumb/' . $file_name);  
    unlink(FCPATH . '/uploads/watermark/' . $file_name);  

}