自动下载然后上传 chrome 扩展名中的文件 [重复]

Question

我正在编写一个 Chrome 扩展程序，它可以自动从一个位置下载文件，然后将其上传到另一个位置。我已经弄清楚如何使用 HTML5 Filesystem API 进行下载部分。但是，我不知道如何上传文件。

问题是必须通过使用“文件”输入元素的表单完成上传。我只想告诉表单文件所在的位置（我可以从 Filesystem API 获取下载文件的位置）。但我想不出一种以编程方式做到这一点的方法。

有什么想法吗？如果我能澄清任何事情，请告诉我！

编辑：另一种选择是 chrome.downloads 扩展 API

编辑：文件 API 看起来很有希望 (http://dev.w3.org/2006/webapi/FileAPI/)。我也发现这很有帮助：https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Answer 1

所以，这就是我最终让它工作的方式。它是在 Chrome 扩展程序中完成的。我认为这在普通的浏览器脚本中是不可能的，因为使用了 canvas.toDataURL 函数，如果下载的文件是跨域的，则会引发安全异常。无论如何，这是我如何做到的简化版本。幸运的是我正在下载和上传的文件是图片，所以我可以使用 Image() 类。

// load the image
var img = new Image();
img.src = "url to image";

// loaded
img.onload = function() {
    // convert the image into a data url
    var dataUrl = getImageDataUrl(this);

    var blob = dataUrlToBlob(dataUrl);

    // FormData will encapsulate the form, and understands blobs
    var formData = new FormData();

    // "image_name.png" can be whatever you want; it's what the
    // host will see as the filename for this image (the host server
    // that receives the posted form).  it doesn't have to match the
    // original filename, and can be arbitrary or not provided at all.
    formData.append("file", blob, "image_name.png");

    var request = new XMLHttpRequest();

    // upload
    request.open("POST", "url to form");
    request.send(formData);
};


// converts an image into a dataurl
function getImageDataUrl(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);


    // NOTE:  this will throw a cross-origin security exception
    // if not done in an extension and if the image is cross-origin
    return canvas.toDataURL("image/png");
}

// converts a dataurl into a blob
function dataUrlToBlob(dataUrl) {
    var binary = atob(dataUrl.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

Answer 2

我不知道是否存在类似的东西，但您可以使用 Javascript 动态创建表单，然后更新文件输入值并最终触发表单的提交事件。