Javascript 自动下载并上载chrome扩展名中的文件

我正在编写一个Chrome扩展，它可以自动从一个位置下载文件，然后上传到另一个位置。我已经了解了如何使用HTML5文件系统API完成下载部分。但是，我不知道如何上传文件

问题是上传必须通过使用“file”输入元素的表单完成。我只想告诉表单文件的位置（我可以从文件系统API获得下载文件的位置）。但我想不出一种通过编程实现的方法

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

编辑：另一个选项是chrome.downloads扩展API

---

编辑：文件API看起来很有前途（）。我还发现这很有帮助：

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

因此，这就是我最终使其工作的方式。它是在Chrome扩展中完成的。我认为在普通的浏览器脚本中不可能这样做，因为使用了canvas.toDataURL函数，如果下载的文件是跨源文件，则会引发安全异常。不管怎样，这里有一个我是如何做到的简化版本。幸运的是，我下载和上传的文件都是图像，所以我可以使用Image（）类

//加载图像
var img=新图像（）；
img.src=“指向图像的url”；
//装载
img.onload=函数（）{
//将图像转换为数据url
var-dataUrl=getImageDataUrl（此）；
var blob=dataUrlToBlob（dataUrl）；
//FormData将封装表单，并理解blob
var formData=new formData（）；
//“image_name.png”可以是您想要的任何内容；它是
//主机将作为此映像的文件名（主机服务器
//，它不必与
//原始文件名，可以是任意的，也可以根本不提供。
append（“file”，blob，“image_name.png”）；
var request=new XMLHttpRequest（）；
//上传
请求。打开（“发布”、“url到表单”）；
请求。发送（formData）；
};
//将图像转换为dataurl
函数getImageDataUrl（img）{
//创建一个空的画布元素
var canvas=document.createElement（“canvas”）；
canvas.width=img.width；
canvas.height=img.height；
//将图像内容复制到画布
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
//注意：这将引发跨源安全异常
//如果未在扩展中执行，并且图像是交叉原点
返回canvas.toDataURL（“image/png”）；
}
//将数据URL转换为blob
函数dataUrlToBlob（dataUrl）{
var binary=atob（dataUrl.split（'，）[1]）；
var数组=[]；
对于（var i=0；i

问题实际上是用一个文件填充该文件元素。请将您的答案标记为已接受，以便其他人看到问题所在以及解决方法。此答案解决了图像文件的问题，但是，如果文件不是图像，我建议在这里查看我的答案，您可以通过AJAX请求

file://{filepath}

获取文件内容，然后将其转换为FormData的blob。这适用于任何给定的文件。

// 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'});
}