首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何用AJAX和PHP上传图片?

如何用AJAX和PHP上传图片?
EN

Stack Overflow用户
提问于 2020-04-30 17:52:16
回答 1查看 41关注 0票数 0

我试图上传一张图片,并插入到一个数据库旁边的用户资料作为个人资料图片。我当前得到的输出是{"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}我该如何解决这个问题?我还尝试使用本地存储,因为这是用于Cordova应用程序的。在数据库中,我有'Imagename‘'varchar(50)’null = yes

HTML

代码语言:javascript
复制
<img src="img/profilepic.png" alt="profilepic" style="width:200px;height:200px;">
                <form id="imageForm" method="POST" enctype="multipart/form-data" class="imageform">
                    Select image to upload:
                    <input type="file" name="fileToUpload" id="fileToUpload">
                    <input type="submit" value="Upload Image" name="submit">
                </form>

                <p id="error" class="errormessage"></p>
                <p id="image" class="imagemessage"></p>

JS

代码语言:javascript
复制
// When upload image button is clicked
$(document).ready(function() {
    var imageform = $("#imageForm");
    $("#imageForm").on('submit', function(event) {
        event.preventDefault();
        var imageValue = document.getElementById("fileToUpload").value; 

        //Set Local Store for Image
        window.localStorage.setItem("fileToUpload", fileToUpload);

        var imageform = new FormData(this);

        var formData = new FormData($('#imageForm')[0]);

            //Get Storage 
                var username = window.localStorage.getItem("username");

                imageform.append('username', username);

                var image = window.localStorage.getItem("fileToUpload");

                //imageform.append('fileToUpload', fileToUpload);

            // Call AJAX    
            $.ajax({
                type: 'POST',
                url: 'image.php',
                data: imageform,
                processData: false, 
                contentType: false,
                success: function(data) {
                    if(data == "Success"){
                        document.getElementById("image").innerHTML = "Image Change Successful";

                        var image = window.localStorage.getItem("fileToUpload");

                            console.log(data); 

                    } else {
                        console.log(data); 
                        document.getElementById("error").innerHTML = "Error Uploading Image";
                    }
                }
            });  
        $("#fileToUpload").on("change", function() {
        $("imageForm").submit();
    }); 
  }); 
});

PHP

代码语言:javascript
复制
<?php
    require_once('checklog.php');
    require_once("functions.php");
    require_once("db_connect.php");

$username = $_POST['username'];
$image = $_POST['fileToUpload'];

session_start(); 
if($_POST['submit'] == "Upload Image"){
    $target_dir = "images/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
    // Check if image file is a actual image or fake image
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
        if($check !== false) {
            $message = "File is an image - " . $check["mime"] . ".";
            $uploadOk = 1;
        } else {
            $message = "File is not an image.";
            $uploadOk = 0;
        }
    }
    // Check if file already exists
    if (file_exists($target_file)) {
        $message = "Sorry, file already exists.";
        $uploadOk = 0;
    }
    // Check file size
    if ($_FILES["fileToUpload"]["size"] > 500000) {
        $message = "Sorry, your file is too large.";
        $uploadOk = 0;
    }
    // Allow certain file formats
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
    && $imageFileType != "gif" ) {
        $message = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
        $uploadOk = 0;
    }
    // Check if $uploadOk is set to 0 by an error
    if ($uploadOk == 0) {
        $message = "Sorry, your file was not uploaded.";
    // if everything is ok, try to upload file
    } else {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {

            $uploadedfilename= basename( $_FILES["fileToUpload"]["name"]);
            $query = "UPDATE users SET imagename='$uploadedfilename' WHERE username='$username'";
            mysqli_query($db_server, $query) or die("Insert failed. ". mysqli_error($db_server)); 
            $message = "<strong>Image $uploadedimage upload successful!</strong>";


        } else {
            $message = "Sorry, there was an error uploading your file.";
        }
    }
}

$currentimagename = "profilepic.png";
$query="SELECT imagename FROM users WHERE username='$username'"; 
$result = mysqli_query($db_server, $query) or die("image load failed. ". mysqli_error($db_server)); 
if($row = mysqli_fetch_array($result)){
    if($row['imagename']<>""){
        $currentimagename = $row['imagename'];
    }   
}
mysqli_free_result($result);

echo $message;

echo json_encode($result);

?>
EN

回答 1

Stack Overflow用户

发布于 2020-04-30 18:49:19

嗨,我认为这个链接会对你有所帮助,在你的数据库中还有一个改变,你需要改变你的数据类型是BLOB或varchar大小php-ajax-image-upload

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61520608

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档