Я никогда раньше ничего подобного не делал, и я спрашиваю, как это сделать. Я могу найти, как это сделать с помощью простой многоформатной части html и т. Д. Но теперь, как это сделать с помощью ajax?
Псевдокод:
HTML:
<input type="text" class="imgform" name="imagename" value="name" /> <input type="file" class="imgform_image" name="image" value="C:\Users\william\Pictures\image.png" /> <input type="button" id="btn" form="imgform" /> Jquery:
$('body').on('click', '#btn', function(){ var form = $(this).attr("form"); var string = $('.' + form).serialize(); var image = $('.imgform_image').value("form"); image = converttobase64(image); $.post('action.php?action=uploadimg', string + {'image':image}, function (data){ datalader(data); }); });
Не знаю, как это сделать. Также есть способ сделать это для нескольких файлов img и chek, если файл на самом деле является изображением и, конечно же, использовать имя файла как имя изображения вместо использования текстового поля ввода.
Любой отзыв, ссылка или пример кода были бы полезны вам заранее!
Примечание. Я полностью пересмотрел свой ответ и сделал его лучше!
HTML
Сначала мы делаем традиционную форму без кнопки подтверждения. Вместо этого мы делаем кнопку.
<form enctype="multipart/form-data" id="myform"> <input type="text" name="some_usual_form_data" /> <br> <input type="file" accept="image/*" multiple name="img[]" id="image" /> <sub>note that you have to use [] behind the name or php wil only see one image</sub> <br> <input type="button" value="Upload images" class="upload" /> </form> <progress value="0" max="100"></progress> <hr> <div id="content_here_please"></div>
Сторона загрузки Javascript / jquery
чем здесь Javascript .. o да и JQuery для загрузки изображений и других данных формы:
$(document).ready(function () { $('body').on('click', '.upload', function(){ // Get the form data. This serializes the entire form. pritty easy huh! var form = new FormData($('#myform')[0]); // Make the ajax call $.ajax({ url: 'action.php', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progress, false); } return myXhr; }, //add beforesend handler to validate or something //beforeSend: functionname, success: function (res) { $('#content_here_please').html(res); }, //add error handler for when a error occurs if you want! //error: errorfunction, data: form, // this is the important stuf you need to overide the usual post behavior cache: false, contentType: false, processData: false }); }); }); // Yes outside of the .ready space becouse this is a function not an event listner! function progress(e){ if(e.lengthComputable){ //this makes a nice fancy progress bar $('progress').attr({value:e.loaded,max:e.total}); } }
Часть обработки PHP
И для тех, кому нужна php-сторона, чтобы что-то сделать с этими изображениями, это PHP-код для циклического корыта:
<?php $succeed = 0; $error = 0; $thegoodstuf = ''; foreach($_FILES["img"]["error"] as $key => $value) { if ($value == UPLOAD_ERR_OK){ $succeed++; // get the image original name $name = $_FILES["img"]["name"][$key]; // get some specs of the images $arr_image_details = getimagesize($_FILES["img"]["tmp_name"][$key]); $width = $arr_image_details[0]; $height = $arr_image_details[1]; $mime = $arr_image_details['mime']; // Replace the images to a new nice location. Note the use of copy() instead of move_uploaded_file(). I did this becouse the copy function will replace with the good file rights and move_uploaded_file will not shame on you move_uploaded_file. copy($_FILES['img']['tmp_name'][$key], './upload/'.$name); // make some nice html to send back $thegoodstuf .= " <br> <hr> <br> <h2>Image $succeed - $name</h2> <br> specs, <br> width: $width <br> height: $height <br> mime type: $mime <br> <br> <br> <img src='./upload/$name' title='$name' /> "; } else{ $error++; } } echo 'Good lord vader '.$succeed.' images where uploaded with success!<br>'; if($error){ echo 'shameful display! '.$error.' images where not properly uploaded!<br>'; } echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; echo $thegoodstuf; ?>
жить демо на моем веб-сервере Dev, который не всегда в сети!
Если вы хотите сжать и изменить размер
Вам нужен этот класс:
class SimpleImage{ var $image; var $image_type; function load($filename){ $image_info = getimagesize($filename); $this->image_type = $image_info[2]; if($this->image_type == IMAGETYPE_JPEG) { $this->image = imagecreatefromjpeg($filename); } elseif($this->image_type == IMAGETYPE_GIF) { $this->image = imagecreatefromgif($filename); } elseif($this->image_type == IMAGETYPE_PNG) { $this->image = imagecreatefrompng($filename); } } function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=0777){ if($image_type == IMAGETYPE_JPEG) { $gelukt = imagejpeg($this->image,$filename,$compression); } elseif($image_type == IMAGETYPE_GIF) { $gelukt = imagegif($this->image,$filename); } elseif($image_type == IMAGETYPE_PNG) { $gelukt = imagepng($this->image,$filename); } if($permissions != false) { chmod($filename,$permissions); } return $gelukt; } function output($image_type=IMAGETYPE_JPEG) { if($image_type == IMAGETYPE_JPEG) { imagejpeg($this->image); } elseif($image_type == IMAGETYPE_GIF) { imagegif($this->image); } elseif($image_type == IMAGETYPE_PNG) { imagepng($this->image); } } function getWidth(){ return imagesx($this->image); } function getHeight(){ return imagesy($this->image); } function maxSize($width = 1920, $height = 1080){ if(($this->getHeight() > $height) && ($this->getWidth() > $width)){ $ratio = $height / $this->getHeight(); $newwidth = $this->getWidth() * $ratio; if($newwidth > $width){ $ratio = $width / $newwidth; $height = $height * $ratio; $newwidth = $width; } $this->resize($newwidth,$height); return true; } elseif($this->getHeight() > $height){ $ratio = $height / $this->getHeight(); $width = $this->getWidth() * $ratio; $this->resize($width,$height); return true; } elseif($this->getWidth() > $width){ $ratio = $width / $this->getWidth(); $height = $this->getheight() * $ratio; $this->resize($width,$height); return true; } return false; } function resizeToHeight($height){ $ratio = $height / $this->getHeight(); $width = $this->getWidth() * $ratio; $this->resize($width,$height); } function resizeToWidth($width){ $ratio = $width / $this->getWidth(); $height = $this->getheight() * $ratio; $this->resize($width,$height); } function scale($scale){ $width = $this->getWidth() * $scale/100; $height = $this->getheight() * $scale/100; $this->resize($width,$height); } function resize($width,$height) { $new_image = imagecreatetruecolor($width, $height); if( $this->image_type == IMAGETYPE_GIF || $this->image_type == IMAGETYPE_PNG ) { $current_transparent = imagecolortransparent($this->image); if($current_transparent != -1) { $transparent_color = imagecolorsforindex($this->image, $current_transparent); $current_transparent = imagecolorallocate($new_image, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']); imagefill($new_image, 0, 0, $current_transparent); imagecolortransparent($new_image, $current_transparent); } elseif($this->image_type == IMAGETYPE_PNG) { imagealphablending($new_image, false); $color = imagecolorallocatealpha($new_image, 0, 0, 0, 127); imagefill($new_image, 0, 0, $color); imagesavealpha($new_image, true); } } imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight()); $this->image = $new_image; } }
вы можете использовать его так:
$succeed = 0; $error = 0; $thegoodstuf = ''; foreach($_FILES["img"]["error"] as $key => $value) { if ($value == UPLOAD_ERR_OK){ $succeed++; $name = $_FILES["img"]["name"][$key]; $image = new SimpleImage(); $image->load($_FILES['img']['tmp_name'][$key]); $chek = $image->maxSize(); if($chek){ $move = $image->save('./upload/'.$name); $message= 'Afbeelding verkleind naar beter formaat!<br>'; } else{ $move = copy($_FILES['img']['tmp_name'][$key], './upload/'.$name); #$move = move_uploaded_file($_FILES['img']['tmp_name'][$key], './upload/'.$name); $message= ''; } if($move){ $arr_image_details = getimagesize('./upload/'.$name); $width = $arr_image_details[0]; $height = $arr_image_details[1]; $mime = $arr_image_details['mime']; $thegoodstuf .= " <br> <hr> <br> <h2>Image $succeed - $name</h2> <br> specs, <br> $message width: $width <br> height: $height <br> mime type: $mime <br> <br> <br> <img src='./upload/$name' title='$name' /> "; } else{ $error++; } } else{ $error++; } } echo 'Good lord vader '.$succeed.' images where uploaded with success!<br>'; if($error){ echo 'shameful display! '.$error.' images where not properly uploaded!<br>'; } echo 'O jeah there was a field containing some usual form data: '. $_REQUEST['some_usual_form_data']; echo $thegoodstuf;
У меня есть обновленная версия с resizer:
$succeed = 0; $error = 0; $thegoodstuf = ''; foreach($_FILES["file"]["error"] as $key => $value) { if ($value == UPLOAD_ERR_OK){ $succeed++; // get the image original name $name = $_FILES["file"]["name"][$key]; $ext = pathinfo($name, PATHINFO_EXTENSION); $img_name=md5($name.rand(00000,99999)).".".$ext;//rename filename if($ext=="jpg" || $ext=="jpeg" ){ $uploadedfile = $_FILES['file']['tmp_name'][$key]; $src = imagecreatefromjpeg($uploadedfile); }else if($ext=="png"){ $uploadedfile = $_FILES['file']['tmp_name'][$key]; $src = imagecreatefrompng($uploadedfile); }else { $src = imagecreatefromgif($uploadedfile); } list($width,$height)=getimagesize($uploadedfile); $new_width=800; $new_height=($height/$width)*$new_width; $tmp=imagecreatetruecolor($new_width,$new_height); $new_width1=140; $new_height1=($height/$width)*$new_width1; $tmp1=imagecreatetruecolor($new_width1,$new_height1); imagecopyresampled($tmp,$src,0,0,0,0,$new_width,$new_height, $width,$height); imagecopyresampled($tmp1,$src,0,0,0,0,$new_width1,$new_height1, $width,$height); $filename = "../../photos/".$img_name; $filename1 = "../../photos/tn/".$img_name; imagejpeg($tmp,$filename,100); imagejpeg($tmp1,$filename1,100); imagedestroy($src); imagedestroy($tmp); imagedestroy($tmp1); //insert to DB here // make some nice html to send back $thegoodstuf .= " <br> <hr> <div class='thumbnail'> <b class='alert alert-info'>Image $succeed - $img_name</b> <br> width: $new_width <br> height: $new_height <br> mime type: $mime <br> <br> <br> <img src='../../photos/$img_name' title='$img_name' class='thumbnail'/> </div> "; } else{ $error++; } } echo $thegoodstuf; echo $succeed.' images where uploaded with success!<br>'; if($error){ echo $error.' images where not properly uploaded!<br>'; }