如何从图像 URL 制作 formData 对象答案

【问题标题】：How to make formData object from image URL如何从图像 URL 制作 formData 对象
【发布时间】：2014-05-20 01:30:06
【问题描述】：

我想从 url 上传图片，例如：http://.. ../logo.png 我需要从图像 url 制作 formData 对象，但它不起作用：

HTML：

<form id="form-url">
    <input type="text" class="image" id="textarea" placeholder="URL" />
    <button>UPLOAD</button>
</form>

Javascript：

$("#form-url").submit(function(e) {
        if ($(".image").val() != "URL" && $(".image").val() != "") {

            //I also tried this:
            var data;
            var img = new Image();
            img.src = $(".image").val();
            img.load = function(){
                data = getBase64Image($(".image").val());
            };
            //but it send undefined

            //and this:
            var data = URL.createObjectURL($(".image").val()); //dont work
            //error: TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL.

               //Upload process working on normal input type file uploading but no on URL image
            var formData = new FormData(data);
            formData.append("fileToUpload", data);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', "upload_ajax.php", true);

            xhr.onload = function () {
              if (xhr.status === 200) {
                data = xhr.responseText;
                datas = data.split("_");
                if (datas[0] != "true") {
                    alert(data);
                } else {
                    alert('YES');
                }
              } else {
                alerter('An error occurred while uploading this file! Try it again.');
              }
            };

            xhr.send(formData);

        } else { alerter("Your file must be an image!"); }
        return false;
    });

我的 php 调试脚本：

<?php
    if (isset($_POST)) {

        var_dump($_POST);
        if (empty($_FILES['fileToUpload']['tmp_name'])) {
            echo "Your file must be an image!";
        } else {
            echo $_FILES['fileToUpload']['name'];
            echo $_FILES['fileToUpload']['size'];
        }
    }
?>

感谢您的所有帮助和您的时间.. 对不起我的英语不好（学生）

【问题讨论】：

看这里，应该可以的。 stackoverflow.com/a/8758614/1592572
@VictorHäggqvist，这是从客户端计算机上传文件，他想从某个 URL 检索和图像并上传。

标签： javascript php image url upload

【解决方案1】：

如果getBase64Image 来自here，或者与之相似。

那你用错了。您需要将图像节点本身传递给它。此外，图像加载事件是异步的，因此您必须等待它完成才能获取数据并发送。

var xhr = new XMLHttpRequest();
var formData = new FormData();
xhr.open('POST', "upload_ajax.php", true);
...
var img = new Image();
img.onload = function(){
   var data = getBase64Image(this);
   formData.append("fileToUpload", data);
   xhr.send(formData);
};

另外请注意，在服务器端，您需要从 base64 编码中对其进行解码，因为它是通过字符串发送的，它将位于 $_POST 而不是 $_FILE

var rawContents = base64_decode($_POST['fileToUpload']);

请注意，您也可以只将 url 发送到 php 脚本并让 php 获取图像数据

var rawContents = file_get_contents($_POST['imageurl']);

【讨论】：