个人中心
gpt4 book ai didi

javascript - 带自动相册的 Ajax 图片 uploader

转载 作者：行者123 更新时间：2023-11-28 00:54:41 24 4
gpt4 key购买 nike

我正在开发我的婚礼网站，希望允许客人上传照片。我尝试将“使用 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/

24 4 0
文章推荐： javascript - 从另一个页面抓取 HTML
文章推荐： html - 如何使输入字段具有多行
文章推荐： jquery - 如何以我想要的方式在 jQuery 中使用 "attr()"？
文章推荐： php - Magento:在产品页面中将产品选项显示为两列中的列表元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com