自动下载，然后上载一个扩展名为chrome的文件 [英] Automatically download and then upload a file in a chrome extension

问题描述

我正在编写一个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

解决方案

所以，这是我终于找到工作的方式。这是在Chrome扩展中完成的。我不认为这是正常的浏览器脚本中可能的，因为使用了canvas.toDataURL函数，并且如果下载的文件是交叉源的，将会引发安全异常。无论如何，这是我做了一个简单的版本。幸运的是我正在下载和上传的文件是图片，所以我可以使用Image（）类。

  //载入image 
 var img = new Image（）; 
 img.src =url to image; 
 $ b //加载
 img.onload = function（）{
 //将图像转换为数据url 
 var dataUrl = getImageDataUrl（this）; 
 
 var blob = dataUrlToBlob（dataUrl）; 
 
 // FormData将封装表单，并理解blob 
 var formData = new FormData（）; 
 
 //image_name.png可以是任何你想要的;这就是
 //主机会看到这个图像的文件名（主机服务器
 //接收到发布的表单）。它不必匹配
 //原始文件名，可以是任意的或者根本不提供。 
 formData.append（file，blob，image_name.png）; 
 
 var request = new XMLHttpRequest（）; 
 
 //上传
 request.open（POST，url to form）; 
 request.send（formData）; 
}; 
 
 
 //将图像转换为数据
函数getImageDataUrl（img）{
 //创建一个空的画布元素
 var canvas = document。的createElement（ 画布）; 
 canvas.width = img.width; 
 canvas.height = img.height; 
 
 //将图像内容复制到画布
 var ctx = canvas.getContext（2d）; 
 ctx.drawImage（img，0，0）; 
 
 
 //注意：如果在扩展中没有完成，并且如果图像是交叉的，
会返回一个跨源安全异常
 canvas.toDataURL（ 图像/ PNG）; 
 
 
 //将一个dataurl转换成一个blob 
函数dataUrlToBlob（dataUrl）{
 var binary = atob（dataUrl.split（'，'）[1 ]）; 
 var array = []; 
 for（var i = 0; i< binary.length; i ++）{
 array.push（binary.charCodeAt（i））; 
 
返回新的Blob（[new Uint8Array（array）]，{type：'image / png'}）; 
} 
  

I'm writing a Chrome Extension that automates downloading a file from one location and then uploading it to another. I've figured out how to do the download part using the HTML5 Filesystem API. However, I don't know how to then upload the file.

The issue is that the upload has to be done through a form using a "file" input element. I'd like to just tell the form where the file is located (I can get the location of the downloaded file from the Filesystem API). But I can't figure out a way of doing that programmatically.

Any ideas? Let me know if I can clarify anything!

EDIT: Another option is chrome.downloads extension API

EDIT: The File API looks promising (http://dev.w3.org/2006/webapi/FileAPI/). I also found this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

解决方案

So, this is the way I finally got it working. It's done in a Chrome extension. I don't think it's possible in a normal browser script, since the canvas.toDataURL function is used and will throw a security exception if the downloaded file is cross-origin. Anyway, here's a simplified version of how I did it. Luckily the files I'm downloading and uploading are images, so I can use the Image() class.

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

这篇关于自动下载，然后上载一个扩展名为chrome的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！