注意：我完全审查了我的答案并使其变得更好！
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;
?>
在我的开发网络服务器上进行现场演示，它并不总是在线！
如果要压缩和调整大小
你需要这个类：
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;