Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/232.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用jquery上传我的图像无效_Javascript_Php_Jquery_Ajax - Fatal编程技术网

Javascript 使用jquery上传我的图像无效

Javascript 使用jquery上传我的图像无效,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在尝试使用Jquery和php上传一个图像,但是没有上传。任何知道如何解决这个问题的人,请帮我解决这个问题。我在控制台上检查了ajax url。url可以正常工作,但我不知道为什么没有上传 index.php: <form enctype="multipart/form-data" name="imageform" id="imageform" method="post"> <div class="form-group"> <label

我正在尝试使用Jquery和php上传一个图像,但是没有上传。任何知道如何解决这个问题的人,请帮我解决这个问题。我在
控制台上检查了ajax url。url
可以正常工作,但我不知道为什么没有上传

index.php

<form enctype="multipart/form-data" name="imageform"  id="imageform" method="post">
    <div class="form-group">
        <label>Please Choose Image: </label>
        <input class='file' type="file" class="form-control" name="images" id="images" placeholder="Please choose your image">
        <span class="help-block"></span>
    </div>
    <div id="loader" style="display: none;">Please wait image uploading to server....
    </div>
    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/>
</form>
ajax.php:

<?php
require_once 'dbconnect.php';
$data = array();
if (isset($_POST['image_upload'] ) && !empty($_FILES['images'])) {

    $image = $_FILES['images'];
    $allowedExts = array("gif", "jpeg", "jpg", "png");

    if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } else {
        $ip = $_SERVER['REMOTE_ADDR'];
    }

    // Create directory if not exists.
    if (!file_exists('images')) {    
        mkdir('images', 0777, true);
    }
    $image_name = $image['name'];

    // Get image extension.
    $ext = strtolower(pathinfo($image_name, PATHINFO_EXTENSION));

    // Assign unique name to image.
    $name = time() . '.' . $ext;
    //$name = $image_name;
    //image size calcuation in KB
    $image_size = $image['size'] / 1024;
    $image_flag = true;

    // Max image size.
    $max_size = 512;
    if (in_array($ext, $allowedExts) && $image_size < $max_size) {
        $image_flag = true;
    } else {
        $image_flag = false;
        $data['error'] = "Maybe $image_name exceeds max $max_size KB size or incorrect file extension";
    } 

    if ($image["error"] > 0) {
        $image_flag = false;
        $data['error']  = '';
        $data['error'] .= '<br/> ' . $image_name . ' Image contains error - Error Code : ' . $image['error'];
    }

    if ($image_flag) {
        $files = glob('images/*'); // get all file names
        foreach($files as $file) { // iterate files
            if(is_file($file)) {
                unlink($file); // delete file
            }
        }
        move_uploaded_file($image['tmp_name'], 'images/' . $name);

        $src             = 'images/' . $name;
        $dist            = 'images/thumbnail_' . $name;
        $data['success'] = $thumbnail = 'thumbnail_' . $name;
        thumbnail($src, $dist, 200);
        $sql1 = "TRUNCATE TABLE images";
        if (!mysqli_query($conn,$sql1)) {
            die('Error: ' . mysqli_error($conn));
        } 
        $sql2 = "TRUNCATE TABLE image_tag";
        if (!mysqli_query($conn,$sql2)) {
            die('Error: ' . mysqli_error($conn));
        } 

        $sql = "INSERT INTO images (`id`, `original_image`, `thumbnail_image`, `ip_address`) VALUES (NULL, '$name', '$thumbnail', '$ip');";
        if (!mysqli_query($conn,$sql)) {
            die('Error: ' . mysqli_error($conn));
        }
    }
    mysqli_close($conn);
    echo json_encode($data);
} else {
    $data[] = 'No Image Selected..';
}

function thumbnail ($src, $dist, $dis_width = 100) {
    $img       = '';
    $extension = strtolower(strrchr($src, '.'));
    switch($extension)
    {
        case '.jpg':
        case '.jpeg':
            $img = @imagecreatefromjpeg($src);
            break;
        case '.gif':
            $img = @imagecreatefromgif($src);
            break;
        case '.png':
            $img = @imagecreatefrompng($src);
            break;
    }
    $width  = imagesx($img);
    $height = imagesy($img);

    $dis_height = $dis_width * ($height / $width);

    $new_image = imagecreatetruecolor($dis_width, $dis_height);
    imagecopyresampled($new_image, $img, 0, 0, 0, 0, $dis_width, $dis_height, $width, $height);

    $imageQuality = 100;

    switch($extension)
    {
        case '.jpg':
        case '.jpeg':
            if (imagetypes() & IMG_JPG) {
                imagejpeg($new_image, $dist, $imageQuality);
            }
            break;

        case '.gif':
            if (imagetypes() & IMG_GIF) {
                imagegif($new_image, $dist);
            }
            break;

        case '.png':
            $scaleQuality       = round(($imageQuality/100) * 9);
            $invertScaleQuality = 9 - $scaleQuality;

            if (imagetypes() & IMG_PNG) {
                imagepng($new_image, $dist, $invertScaleQuality);
            }
            break;
    }
    imagedestroy($new_image);
}

您需要使用
e.preventDefault()
来避免表单提交和重新加载页面

试试这个:

$(document).ready(function(){
    $('#imageform').on('submit', function(e) {
        e.preventDefault();//preventing page to reload on submit
       var form = new FormData($('#imageform')[0]); //Form object to post using ajax

       $.ajax({
           url: 'ajax.php',
           data: form,
           cache: false,
           dataType: "JSON",
           contentType: false,
           processData: false,
           type: 'POST',

           success: function (data) {
               alert(data);
           }
       });

    });
});

我在打印时得到了数组([images]=>Array([name]=>ty.jpg[type]=>image/jpeg[tmp\u name]=>C:\xampp\tmp\php64F3.tmp[error]=>0[size]=>59253))。但是没有上传工作。谢谢,亲爱的。我也想要一件事。成功后,我想用这个新的oneCool替换div中的图像,使用
数据类型:“JSON”
在成功函数回调中访问JSON响应,更新我的回答我使用了以下方法:如何在成功时获得新值?传递新图像名称,即
$name
$data['img\u name']=$name
,这样您就可以在success函数中获得更新后的图像名称作为
数据.img_name
,然后您就可以使用
$('#divId').html('')
$(document).ready(function(){
    $('#imageform').on('submit', function(e) {
        e.preventDefault();//preventing page to reload on submit
       var form = new FormData($('#imageform')[0]); //Form object to post using ajax

       $.ajax({
           url: 'ajax.php',
           data: form,
           cache: false,
           dataType: "JSON",
           contentType: false,
           processData: false,
           type: 'POST',

           success: function (data) {
               alert(data);
           }
       });

    });
});