javascript - URL から画像を読み込み、フォーム データとして送信する

Question

要素の 1 つがフォームを使用せずにファイルである ajax リクエストを送信する必要があります (理由については、多くの説明が必要です)。問題は、URL から画像を読み込んで、それを ajax リクエストに添付するにはどうすればよいかということです。これまでのところ、次のものがあります。

var data = new FormData();
    data.append("widgetName", json.widgetJson.properties.widgetName);
    data.append("widgetJson", JSON.stringify(json.widgetJson));
    data.append("widgetId", widgetId);
    data.append("width", json.widgetJson.properties.width);
    data.append("height", json.widgetJson.properties.height);
    data.append("publish", true);
    data.append("updatePublishDate", 1);
    data.append("Upload", "Submit Query");
$.ajax({
    url: PROXY + 'http://xxx.xxx.com/xxx.php&userID=' + accountId + '&widgetId=' + widgetId,
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data); //so far this works
        }
    });

これまでのところ、これは機能しているようですが、これに画像を添付する必要があります。どうすればよいでしょうか?

ブラウザ間の互換性は問題ではありません。クロムとおそらくFirefoxをサポートする必要があるだけですが、必須ではありません。