Question

我正在尝试使用$ .ajax请求通过php获取远程文件的内容。然后，我想将该数据作为文件附加到表单并上传。我很亲密，但不是一直都在那里。有人有什么建议吗？我可以在编码时在浏览器中显示图像，但是当我将其作为原始未编码数据或作为base64上传时，我在服务器上获得的文件是不可读的。

getfilecontents.php

$path = 'testimg.jpg';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo $base64;

main.html中

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            var filedata = -1;
            $(document).ready(function () {
                $.ajax({
                    url: "getfilecontents.php", dataType: "text", success: function (data) {
                        filedata = data;
                        showimg(filedata);
                        doUpload();
                    }
                });
            });

            function showimg(fileis) {
                var myFile = new File([fileis], "foo.jpg", {
                    type: 'image/jpg'
                });
                var reader = new FileReader();
                reader.readAsDataURL(myFile);
                reader.onload = function (e) {
                    var img = document.createElement("img");
                    img.file = myFile;
                    img.src = fileis;// e.target.result;
                    img.className = "thumb";
                    $("body").append(img);

                }
            }

            function doUpload() {
                var formData = new FormData(document.getElementById("uploadform1"));
                var myFile = new File([filedata], "strava.jpg", {
                    type: 'image/jpg'
                });
                formData.append("fileToUpload", myFile);
                $.ajax({
                    url: "uploadfile.php",
                    type: "POST",
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: "HTML",
                    success: function (data) {
                        alert("success " + data);
                    },
                    error: function (data) {
                        alert("failed");
                    }
                });
            }
        </script>
    </head>
    <body>
        <form action="test3.php" method="post" id="uploadform1" enctype="multipart/form-data">
            Select image to upload:
            <input type="submit" value="Upload Image" name="submit">
        </form>

    </body>
</html>

uploadfile.php

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
    echo "Sorry, there was an error uploading your file.";
}

将远程文件的内容作为blob加载并通过JavaScript作为文件上传

0 个答案: