我有这个从PHP脚本获取数据的AJAXcode，如何在PHP中设置多个echo变量并使用AJAX单独输出它们而不刷新保持在同一页面上？
AJAX代码
$(document).ready(function() {
//elements
var progressbox = $('#progressbox');
var progressbar = $('#progressbar');
var statustxt = $('#statustxt');
var submitbutton = $("#SubmitButton");
var myform = $("#UploadForm");
var output = $("#ImageOutput");
var completed = '0%';
$(myform).ajaxForm({
beforeSend: function() { //brfore sending form
submitbutton.attr('disabled', ''); // disable upload button
statustxt.empty();
progressbox.slideDown(); //show progressbar
progressbar.width(completed); //initial value 0% of progressbar
statustxt.html(completed); //set status text
statustxt.css('color','#000'); //initial color of status text
},
uploadProgress: function(event, position, total, percentComplete) { //on progress
progressbar.width(percentComplete + '%') //update progressbar percent complete
statustxt.html(percentComplete + '%'); //update status text
if(percentComplete>50)
{
statustxt.css('color','#fff'); //change status text to white after 50%
}
},
complete: function(response) { // on complete
output.html(response.responseText); //update element with received data
myform.resetForm(); // reset form
submitbutton.removeAttr('disabled'); //enable submit button
progressbox.slideUp(); // hide progressbar
},
});
});
PHP代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<?php
//ini_set('display_errors', 1);
//error_reporting(E_ALL);
if(isset($_GET))
{
//Some Settings
$BigImageMaxSize = 300; //Image Maximum height or width
$DestinationDirectory = 'uploads/'; //Upload Directory ends with / (slash)
$Quality = 80;
// check $_FILES['ImageFile'] array is not empty
// "is_uploaded_file" Tells whether the file was uploaded via HTTP POST
if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name']))
{
die('Something went wrong with Upload!'); // output error when above checks fail.
}
// Random number for both file, will be added after image name
$RandomNumber = rand(0, 9999999999);
// Elements (values) of $_FILES['ImageFile'] array
//let's access these values by using their index position
$ImageName = str_replace(' ','-',strtolower($_FILES['ImageFile']['name']));
$ImageSize = $_FILES['ImageFile']['size']; // Obtain original image size
$TempSrc = $_FILES['ImageFile']['tmp_name']; // Tmp name of image file stored in PHP tmp folder
$ImageType = $_FILES['ImageFile']['type']; //Obtain file type, returns "image/png", image/jpeg, text/plain etc.
//Let's use $ImageType variable to check wheather uploaded file is supported.
//We use PHP SWITCH statement to check valid image format, PHP SWITCH is similar to IF/ELSE statements
//suitable if we want to compare the a variable with many different values
switch(strtolower($ImageType))
{
case 'image/png':
$CreatedImage = imagecreatefrompng($_FILES['ImageFile']['tmp_name']);
break;
case 'image/gif':
$CreatedImage = imagecreatefromgif($_FILES['ImageFile']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
case 'image/jpg':
$CreatedImage = imagecreatefromjpeg($_FILES['ImageFile']['tmp_name']);
}
//PHP getimagesize() function returns height-width from image file stored in PHP tmp folder.
//Let's get first two values from image, width and height. list assign values to $CurWidth,$CurHeight
list($CurWidth,$CurHeight)=getimagesize($TempSrc);
//Get file extension from Image name, this will be re-added after random name
$ImageExt = substr($ImageName, strrpos($ImageName, '.'));
$ImageExt = str_replace('.','',$ImageExt);
//remove extension from filename
$ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
//Construct a new image name (with random number added) for our new image.
$NewImageName = 'IMG-'.$RandomNumber.'.'.$ImageExt;
//set the Destination Image
$DestRandImageName = $DestinationDirectory.$NewImageName; //Name for Big Image
//Resize image to our Specified Size by calling resizeImage function.
if(resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType))
{
/*
At this point we have succesfully resized and created thumbnail image
We can render image to user's browser or store information in the database
For demo, we are going to output results on browser.
*/
//Get New Image Size
list($ResizedWidth,$ResizedHeight)=getimagesize($DestRandImageName);
$ImageURL = '<img src="uploads/'.$NewImageName.'" class="imageUploaded" height="'.$ResizedHeight.'" width="'.$ResizedWidth.'">';
echo $ImageURL;
}else{
die('Resize Error'); //output error
}
}
$_SESSION['varname'] = $NewImageName;
// This function will proportionally resize image
function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)
{
//Check Image size is not 0
if($CurWidth <= 0 || $CurHeight <= 0)
{
return false;
}
//Construct a proportional size of new image
$ImageScale = min($MaxSize/$CurWidth, $MaxSize/$CurHeight);
$NewWidth = ceil($ImageScale*$CurWidth);
$NewHeight = ceil($ImageScale*$CurHeight);
if($CurWidth < $NewWidth || $CurHeight < $NewHeight)
{
$NewWidth = $CurWidth;
$NewHeight = $CurHeight;
}
$NewCanves = imagecreatetruecolor($NewWidth, $NewHeight);
// Resize Image
if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))
{
switch(strtolower($ImageType))
{
case 'image/png':
imagepng($NewCanves,$DestFolder);
break;
case 'image/gif':
imagegif($NewCanves,$DestFolder);
break;
case 'image/jpeg':
case 'image/pjpeg':
imagejpeg($NewCanves,$DestFolder,$Quality);
break;
default:
return false;
}
//Destroy image, frees up memory
if(is_resource($NewCanves)) {imagedestroy($NewCanves);}
return true;
}
}
//This function corps image to create exact square images, no matter what its original size!
function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType)
{
//Check Image size is not 0
if($CurWidth <= 0 || $CurHeight <= 0)
{
return false;
}
//abeautifulsite.net has excellent article about "Cropping an Image to Make Square"
//http://www.abeautifulsite.net/blog/2009/08/cropping-an-image-to-make-square-thumbnails-in-php/
if($CurWidth>$CurHeight)
{
$y_offset = 0;
$x_offset = ($CurWidth - $CurHeight) / 2;
$square_size = $CurWidth - ($x_offset * 2);
}else{
$x_offset = 0;
$y_offset = ($CurHeight - $CurWidth) / 2;
$square_size = $CurHeight - ($y_offset * 2);
}
$NewCanves = imagecreatetruecolor($iSize, $iSize);
if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize, $iSize, $square_size, $square_size))
{
switch(strtolower($ImageType))
{
case 'image/png':
imagepng($NewCanves,$DestFolder);
break;
case 'image/gif':
imagegif($NewCanves,$DestFolder);
break;
case 'image/jpeg':
case 'image/pjpeg':
imagejpeg($NewCanves,$DestFolder,$Quality);
break;
default:
return false;
}
//Destroy image, frees up memory
if(is_resource($NewCanves)) {imagedestroy($NewCanves);}
return true;
}
}
?>
HTML代码
<form action="processupload.php" method="POST" enctype="multipart/form-data" id="UploadForm">
<table width="500" border="0">
<tr>
<td>File : </td>
<td><input name="ImageFile" type="file" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" id="SubmitButton" value="Upload" /></td>
</tr>
</table>
</form>
<div id="progressbox"><div id="progressbar"></div><div id="statustxt">0%</div ></div>
<div id="ImageOutput"></div>
答案 0 :(得分：1)
我通常使用JSON传输超过1个信息。
示例
这里有一个ajax jQuery（参见http://jquery.org/）期待一个JSON：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url:'/some/script.php',
type:'GET',
dataType: 'json',
'timeout':15000,
'success': function (data) {
if(data.esito == 'OK'){
// do something
} else {
alert(data.message);
}
}
});
</script>
script.php 可以如下所示。不是我构建了一个PHP数组，然后我用JSON转换它：
<?php
// do something
$response = array(
'esito' => 'OK',
'message' => 'message',
'imageUrl' => '/images/1.jpg',
'size' => 12345,
);
echo json_encode($response);
die();
?>