Как обрабатывать несколько файлов с помощью PHP

См .: $ _FILES , Загрузка файлов

 <?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'; } } } } ?> 

Это мой предпочтительный метод. Он включает в себя вставку mysql для хранения таблицы на загруженных изображениях. Он также перемещает изображение в папку изображения администратора и копирует изображение в папку изображений пользовательских сайтов.

 <?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>";} ?> 

Попробуй это:

 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 } 

В вашем коде просто используйте «$ image» вместо «$ _FILES» …

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 ((cx >= box.left) && (cx <= box.right) && (cy >= box.top) && (cy <= box.bottom)){ input.style.top = cy - dialogOffset.top + 'px'; input.style.left = cx - 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; } }; })(); 

Код jquery для загрузки

  $(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(); } }); }); ,  $(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(); } }); }); 

Код 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> 

Функция загрузки (для 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; } } 

Удалить изображение

 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'); } }); } } 

Удалить функцию изображения

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