图像没有出现在ajax php上传

时间:2016-01-05 10:17:59

标签: javascript php jquery ajax

我正在尝试使用 ajax (无刷新页面)上传 php 中的图片,但是当我上传成功存储在数据库中的图片图片路径以及存储在我的目录中的图片时但上传图片未显示在页面上。我认为 Ajax响应存在问题,但我无法确定问题所在。请帮助我..以下是我到目前为止所做的代码......

HTML

     <div id="company_avatar">

      <img src="img/comp_avatar.png" />

    <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="img/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
            </form>

    <div id="output"></div>

        </div>

的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

}

PHP(Processupload.php)

<?php

              session_start();       
              include_once("core/init.php");
              $user = new users();

              $db = db::getInstance();  
              $pdo = $db->getConnection(); 

              $user_id = $_SESSION['user_session'];
              $stmt = $pdo->prepare("SELECT * FROM registeration WHERE user_id=:user_id");
              $stmt->execute(array(":user_id"=>$user_id));
              $userRow=$stmt->fetch(PDO::FETCH_ASSOC);
              $username = $userRow['username'];

############ Configuration ##############
$thumb_square_size      = 200; //Thumbnails will be cropped to 200x200 pixels
$max_image_size         = 250; //Maximum image size (height and width)
$thumb_prefix           = "thumb_"; //Normal thumb Prefix
$destination_folder     = 'C:/wamp/www/Trade_Ally_v1.1/Company_logos/'; //upload directory ends with / (slash)
$jpeg_quality           = 90; //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 = $username. '_' .  rand(0, 9999999999) . '.' . $image_extension;

        //folder path to save resized images and thumbnails
        $thumb_save_folder  = $destination_folder . $thumb_prefix . $new_file_name; 
        $image_save_folder  = $destination_folder . $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*/

            // Inserting Image Path in Database
              $upload_result = $user->company_images($user_id,$new_file_name);

            echo '<div align="center">';
            echo '<img src="C:/wamp/www/Trade_Ally_v1.1/Company_logos/'.$thumb_prefix . $new_file_name.'" alt="Thumbnail">';
            echo '<br />';
            echo '<img src="C:/wamp/www/Trade_Ally_v1.1/Company_logos/'. $new_file_name.'" alt="Resized Image">';
            echo '</div>';

            echo "hello";
        }

        imagedestroy($image_res); //freeup memory
    }
}

请帮帮我......提前致谢..

0 个答案:

没有答案