我正在开发我的婚礼网站，希望允许客人上传照片。 我尝试将“使用 jQuery 和 PHP 进行 Ajax 图像上传和调整大小”与我在线提供的图像库合并。 html 和 php 单独工作都很好，但是当我尝试将它们放在网站页面上时，它在“processupload.php”处停止加载。如果您知道我该如何解决，请感谢您的帮助:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Upload and Resize with jQuery and PHP - Demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/rotate-patch.js"></script>
<script src="js/waypoints.min.js"></script> <!-- if you wont use the Lazy Load feature erase this line -->
<script src="js/autoAlbums.min.js"></script>
<script>
$(function(){
//INITALIZE THE PLUGIN
$('#grid').grid({
imagesOrder: 'byDate', //byName, byDate, byDateReverse, byName, byNameReverse, random
albumsOrder: 'none', //byDate, byDateReverse, byName, byNameReverse, random, none
folderCoverRandom: true, //If there is no folderCover image then get a random image
foldersAtTop: true, //If you want the folders to be always first and then the images
showNumFolder: true, //If you want to show the number of folders inside a folder
showNumImages: true, //If you want to show the number of images inside a folder
autoHideNumFolder: true, //If there is no folders inside a folder then don't show the number of folders
autoHideNumImages: false, //If there is no images inside a folder then don't show the number of images
isFitWidth: false, //Nedded to be true if you wish to center the gallery to its container
lazyLoad: true, //If you wish to load more images when it reach the bottom of the page
showNavBar: true, //Show the navigation bar?
imagesToLoadStart: 15, //The number of images to load when it first loads the grid
imagesToLoad: 10, //The number of images to load when you click the load more button
horizontalSpaceBetweenThumbnails: 2, //The space between images horizontally
verticalSpaceBetweenThumbnails: 2, //The space between images vertically
columnWidth: 'auto', //The width of each columns, if you set it to 'auto' it will use the columns instead
columns: 5, //The number of columns when you set columnWidth to 'auto'
columnMinWidth: 120, //The minimum width of each columns when you set columnWidth to 'auto'
isAnimated: true, //Animation when resizing or filtering with the nav bar
caption: false, //Show the caption in mouse over
captionType: 'classic', // 'grid', 'grid-fade', 'classic' the type of caption effect
lightBox: true, //Do you want the lightbox?
lightboxKeyboardNav: true, //Keyboard navigation of the next and prev image
lightBoxSpeedFx: 100, //The speed of the lightbox effects
lightBoxZoomAnim: false, //Do you want the zoom effect of the images in the lightbox?
lightBoxText: false, //If you wish to show the text in the lightbox
lightboxPlayBtn: true, //Show the play button?
lightBoxAutoPlay: false, //The first time you open the lightbox it start playing the images
lightBoxPlayInterval: 4000, //The interval in the auto play mode
lightBoxShowTimer: true, //If you wish to show the timer in auto play mode
lightBoxStopPlayOnClose: false, //Stop the auto play mode when you close the lightbox?
hashTag: true, //Change the HasTag each time you navigate through albums (so you can share a single album)
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess, // post-submit callback
resetForm: true // reset the form after successful submit
};
$('#MyUploadForm').submit(function() {
$(this).ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});
function afterSuccess()
{
$('#submit-btn').show(); //hide submit button
$('#loading-img').hide(); //hide submit button
}
//function to check file size before uploading.
function beforeSubmit(){
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
if( !$('#imageInput').val()) //check empty input filed
{
$("#output").html("Are you kidding me?");
return false
}
var fsize = $('#imageInput')[0].files[0].size; //get file size
var ftype = $('#imageInput')[0].files[0].type; // get file type
//allow only valid image file types
switch(ftype)
{
case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
break;
default:
$("#output").html("<b>"+ftype+"</b> Unsupported file type!");
return false
}
//Allowed file size is less than 1 MB (1048576)
if(fsize>5048576)
{
$("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.");
return false
}
$('#submit-btn').hide(); //hide submit button
$('#loading-img').show(); //hide submit button
$("#output").html("");
}
else
{
//Output error to older browsers that do not support HTML5 File API
$("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
return false;
}
}
//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
</script>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/gridGallery.css" />
</head>
<body>
<div id="upload-wrapper">
<div align="center">
<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="image_file" id="imageInput" type="file" />
<input type="submit" id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="output"></div>
</div>
</div>
<div id="grid" data-directory="Gallery"></div>
</body>
</html>
processupload.php
<?php
############ Configuration ##############
$thumb_square_size = 200; //Thumbnails will be cropped to 200x200 pixels
$max_image_size = 5000; //Maximum image size (height and width)
$thumb_prefix = "thumb_"; //Normal thumb Prefix
$destination_folder_thumb = 'Gallery/thumbnails/';//upload thumb
$destination_folder_full = 'Gallery/'; //upload full image
$jpeg_quality = 100; //jpeg quality
##########################################
//continue only if $_POST is set and it is a Ajax request
if(isset($_POST) && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
// check $_FILES['ImageFile'] not empty
if(!isset($_FILES['image_file']) || !is_uploaded_file($_FILES['image_file']['tmp_name'])){
die('Image file is Missing!'); // output error when above checks fail.
}
//uploaded file info we need to proceed
$image_name = $_FILES['image_file']['name']; //file name
$image_size = $_FILES['image_file']['size']; //file size
$image_temp = $_FILES['image_file']['tmp_name']; //file temp
$image_size_info = getimagesize($image_temp); //get image size
if($image_size_info){
$image_width = $image_size_info[0]; //image width
$image_height = $image_size_info[1]; //image height
$image_type = $image_size_info['mime']; //image type
}else{
die("Make sure image file is valid!");
}
//switch statement below checks allowed image type
//as well as creates new image from given file
switch($image_type){
case 'image/png':
$image_res = imagecreatefrompng($image_temp); break;
case 'image/gif':
$image_res = imagecreatefromgif($image_temp); break;
case 'image/jpeg': case 'image/pjpeg':
$image_res = imagecreatefromjpeg($image_temp); break;
default:
$image_res = false;
}
if($image_res){
//Get file extension and name to construct new file name
$image_info = pathinfo($image_name);
$image_extension = strtolower($image_info["extension"]); //image extension
$image_name_only = strtolower($image_info["filename"]);//file name only, no extension
//create a random name for new image (Eg: fileName_293749.jpg) ;
$new_file_name = $image_name_only. '_' . rand(0, 9999) . '.' . $image_extension;
//folder path to save resized images and thumbnails
$thumb_save_folder = $destination_folder_thumb . $thumb_prefix . $new_file_name;
$image_save_folder = $destination_folder_full . $new_file_name;
//call normal_resize_image() function to proportionally resize image
if(normal_resize_image($image_res, $image_save_folder, $image_type, $max_image_size, $image_width, $image_height, $jpeg_quality))
{
//call crop_image_square() function to create square thumbnails
if(!crop_image_square($image_res, $thumb_save_folder, $image_type, $thumb_square_size, $image_width, $image_height, $jpeg_quality))
{
die('Error Creating thumbnail');
}
/* We have succesfully resized and created thumbnail image
We can now output image to user's browser or store information in the database*/
echo '<div align="center">';
echo '<img src="Gallery/thumbnails/'.$thumb_prefix . $new_file_name.'" alt="Thumbnail">';
echo '<br />';
/*echo '<img src="uploads/'. $new_file_name.'" alt="Resized Image">';*/
echo '</div>';
}
imagedestroy($image_res); //freeup memory
}
}
##### This function will proportionally resize image #####
function normal_resize_image($source, $destination, $image_type, $max_size, $image_width, $image_height, $quality){
if($image_width <= 0 || $image_height <= 0){return false;} //return false if nothing to resize
//do not resize if image is smaller than max size
if($image_width <= $max_size && $image_height <= $max_size){
if(save_image($source, $destination, $image_type, $quality)){
return true;
}
}
//Construct a proportional size of new image
$image_scale = min($max_size/$image_width, $max_size/$image_height);
$new_width = ceil($image_scale * $image_width);
$new_height = ceil($image_scale * $image_height);
$new_canvas = imagecreatetruecolor( $new_width, $new_height ); //Create a new true color image
//Copy and resize part of an image with resampling
if(imagecopyresampled($new_canvas, $source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height)){
save_image($new_canvas, $destination, $image_type, $quality); //save resized image
}
return true;
}
##### This function corps image to create exact square, no matter what its original size! ######
function crop_image_square($source, $destination, $image_type, $square_size, $image_width, $image_height, $quality){
if($image_width <= 0 || $image_height <= 0){return false;} //return false if nothing to resize
if( $image_width > $image_height )
{
$y_offset = 0;
$x_offset = ($image_width - $image_height) / 2;
$s_size = $image_width - ($x_offset * 2);
}else{
$x_offset = 0;
$y_offset = ($image_height - $image_width) / 2;
$s_size = $image_height - ($y_offset * 2);
}
$new_canvas = imagecreatetruecolor( $square_size, $square_size); //Create a new true color image
//Copy and resize part of an image with resampling
if(imagecopyresampled($new_canvas, $source, 0, 0, $x_offset, $y_offset, $square_size, $square_size, $s_size, $s_size)){
save_image($new_canvas, $destination, $image_type, $quality);
}
return true;
}
##### Saves image resource to file #####
function save_image($source, $destination, $image_type, $quality){
switch(strtolower($image_type)){//determine mime type
case 'image/png':
imagepng($source, $destination); return true; //save png file
break;
case 'image/gif':
imagegif($source, $destination); return true; //save gif file
break;
case 'image/jpeg': case 'image/pjpeg':
imagejpeg($source, $destination, $quality); return true; //save jpeg file
break;
default: return false;
}
}
最佳答案
问题出在 $_SERVER['HTTP_X_REQUESTED_WITH']。该变量并不总是被设置，并且取决于服务器的调用者作为 header 发送的内容。诸如 jQuery 之类的库通常使用以下方式发送此内容 xhrobj.setRequestHeader("X-Requested-With", "XMLHttpRequest");
只要从你的 php 代码中删除该检查就可以了。
if(isset($_POST)){
//your code to handle the uploads
}
关于javascript - 带自动相册的 Ajax 图片 uploader ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26364844/