在 iFrame 中上传文件

Question

我正在尝试在 iFrame 中上传文件，到目前为止一切正常，但我无法在 PHP 端处理图像，因为它似乎没有收到它...

虽然我的进度条确实工作并显示进度并完成，但它似乎确实上传了。 responseText 说：No image selected?

这是我的 aJax：

function submitFile() {
    //The file location
    var theFile = document.getElementById("image").files[0];
    var xhr = new XMLHttpRequest();
    //Disable submit button whilst upload is active
    doc("submit").disabled = true;

    //Completed
    xhr.onload = function(e) {
        if (this.status == 200) {
            document.getElementById("imageUpload").innerHTML = xhr.responseText;
            doc("submit").disabled = false; //Unlock submit button
        }
    };

    //Progress
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var currentPercentage = Math.round(e.loaded / e.total * 100);
            document.getElementById("imageUpload").innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
            document.getElementById("imageUpload").style.backgroundSize = currentPercentage + "% 100%";
        }
    };

    //Send data
    xhr.open("POST", "php/uploadImage.php", true);
    xhr.send(theFile);
}

这是我提交图片的表单，当我选择文件时它会上传，而不是当我点击提交see the onchange function时上传。

<form action="php/submitMessage.php" onsubmit="validation(this)" method="post" id="submitMessage" enctype="multipart/form-data">
    <div class="left half">
        <input class="text" type="text" name="name" placeholder="First and Second Name" 
        rules="[A-Za-z]*\s[A-Za-z]*" />
        <input class="text" type="text" name="email" placeholder="Email Address" 
        rules="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" />
        <textarea name="message" placeholder="Enter your message here..." rows="5"></textarea>
    </div>
    <div class="right half">
        <input class="text" type="text" name="reg" placeholder="Car Registration"/>
        <input type="file" onchange="submitFile();" name="image" id="image" style="display:none;" />
        <input type="hidden" name="image_location" id="image_location"/>
        <label for="image" id="imageUpload" class="uploadBtn">Upload Image</label>
        <p>Message will be regarded as a quote request if you provide an image.</p>
    </div>
    <input type="submit" id="submit" style="background-color:#fff;color:#000;" value="Submit Message/Quote" />
</form>

这是我的 PHP，我想接收文件，调整它的大小，然后设置一个会话变量到它的位置，当提交表单的其余部分时将使用该变量，因为文件位置需要添加到数据库行。

<?php
session_start();

//Image was selected
if($_FILES['image']['tmp_name']) {
    //any errors?
    if(!$_FILES['image']['error']) {
        //validate the file and setup future filename
        $new_file = date("Ymdhisa");

        //Can't be larger than 5MB
        if ($_FILES['image']['size'] > 5000000) {
            //Resize the file
            $width = 500;

            //Keep aspect ratio
            $size = getimagesize($_FILES['image']['tmp_name']);
            $height = round($width*$size[1]/$size[0]);

            //Create object
            if ($size[2] == 1) {
                $images_orig = imagecreatefromgif($_FILES['image']['tmp_name']);
            } else if ($size[2] == 2) {
                $images_orig = imagecreatefromjpeg($_FILES['image']['tmp_name']);
            } else if ($size[2] == 3) {
                $images_orig = imagecreatefrompng($_FILES['image']['tmp_name']);
            }

            //Get image size to create object
            $photoX = imagesx($images_orig);
            $photoY = imagesy($images_orig);

            //Create resized object
            $images_fin = imagecreatetruecolor($width, $height);
            imagecopyresampled($images_fin,$images_orig,0,0,0,0,$width+1,$height+1,$photoX,$photoY); //Resize the image
            imagejpeg($images_fin,"images/".$new_images); //Save image to file

            //Remove image from memory
            imagedestroy($images_orig);
            imagedestroy($images_fin);

            //Set session key for file location
            $_SESSION['tmp_image'] = "uploads/".$new_file; //Should be unset when message has been sent
            $message = "File successfully uploaded!";
            echo $message;
        }
    }
    else 
    {
        $message = "There was an error: ".$_FILES['image']['error'];
        echo $message;
    }
} else {
    echo "No image selected?";
}
?>

Answer 1

这是我的代码，它的工作也很好，希望对你也有用

 function submitVisualMedia()
            {
                $(document).ready(function (e) {
                    var fd = new FormData($("#fileinfo")[0]);
                    $.ajax({
                        url:, //YOUR DESTINATION PAGE
                        type: "POST",
                        data: fd,
                        enctype: 'multipart/form-data',
                        processData: false, // tell jQuery not to process the data
                        contentType: false, // tell jQuery not to set contentType
                        success: function ()
                        {
                     //some code if you want
 
                        }
                    });


                });
                return false;


            }

   <form method="post" id="fileinfo" onsubmit='return submitVisualMedia()'  >
                <input  class="form-control"  type="text" id="title" >
                <input  class="form-control"  type="file" name="visualMedia" id="visualMedia"   accept="image/*">
               <button class="btn btn-success" type="submit">Upload</button>
                             </form>

和php端

public function uploadVisualMedia() {

    ini_set('upload_max_filesize', '25M');
    ini_set('post_max_size', '25M');
    ini_set('max_input_time', 300);
    ini_set('max_execution_time', 300);

    $fname = date('l-j-m-Y').'-'.rand(1,1000000);
    $size = $_FILES['visualMedia']['size'];
    $ftype = $_FILES['visualMedia']['type'];
    $temp = $_FILES['visualMedia']['tmp_name'];
    $type = array();
    $type = explode("/", $ftype);
    $filename = "galleries/" . $type[0] . "_gallery/" . $fname . "." . $type[1];
    $index = 0;
    while (file_exists($filename)) {
        $filename = "galleries/" . $type[0] . "_gallery/" . $fname . "($index)" . "." . $type[1];
        $index++;
    }
    move_uploaded_file($temp, $filename);

}

您在这段代码中几乎没有什么变化，它应该适合您。有了这个，你也可以上传视频和音频。 将 $filename 更改为您想要的某个文件夹名称..