简体   繁体   English

XUL:直接上传到S3但不使用文件输入元素

[英]XUL: Direct upload to S3 but without using a file-input element

I am developing a Firefox addon that needs to upload images from the local file system to S3 directly. 我正在开发一个Firefox插件,需要将图像从本地文件系统直接上传到S3。

The examples I could find in AWS, SO etc. explain how this can be done for web pages using the standard file-input control for image transport (with other AWS specific request signing etc., which I've got working perfectly). 我可以在AWS,SO等中找到的示例解释了如何使用标准文件输入控件进行图像传输(使用其他AWS特定请求签名等,我已经完美地工作)。

http://bencoe.tumblr.com/post/30685403088/browser-side-amazon-s3-uploads-using-cors http://bencoe.tumblr.com/post/30685403088/browser-side-amazon-s3-uploads-using-cors

Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP) 使用带有Ajax请求的HTML,javascript和jQuery将图像上传到Amazon s3(无PHP)

http://aws.amazon.com/articles/1434 http://aws.amazon.com/articles/1434

However, I couldn't find any info regarding how I can upload a file without using the file-input, I know the local absolute path to the file (the addon itself writes out the file before trying to upload it to S3). 但是,我找不到任何关于如何在使用文件输入的情况下上传文件的信息,我知道文件的本地绝对路径(插件本身在尝试将文件上传到S3之前写出文件)。

After a few hours of trying to find the "proper" way, i thought of faking the file-input like below: 经过几个小时试图找到“正确”的方式,我想到伪造文件输入如下:

var fileInput = document.createElementNS("http://www.w3.org/1999/xhtml","input");
fileInput.setAttribute('type', 'file');
fileInput['files'] = [{
    mozFullPath: file.path,
    name: file.leafName,
    size: file.fileSize,
    type: 'image/gif' // testing only with gifs
}];

and then fd.append("file", fileInput.files[0]); 然后是fd.append("file", fileInput.files[0]); where fd is my FormData object. 其中fd是我的FormData对象。 And then POSTing it to s3 via AJAX. 然后通过AJAX将其发布到s3。

This uploads the file to S3. 这会将文件上传到S3。 However, when opening the file in my browser, I get the text "undefined" instead of the image. 但是,在我的浏览器中打开文件时,我得到文本"undefined"而不是图像。

Then i tried fd.append("file", fileInput.files); 然后我尝试了fd.append("file", fileInput.files); - This time the content returned by the browser instead of the image is the text "[object FileList]" - 这次浏览器而不是图像返回的内容是文本"[object FileList]"

I'm stumped! 我很难过! I know it has got to do with trying to fake the file-input. 我知道它与尝试伪造文件输入有关。 I believe there should be a cleaner, more correct way of doping this. 我相信应该有一种更清洁,更正确的方法。

Can anyone shed some light on how i can solve this? 任何人都可以解释我如何解决这个问题? Thanks in advance. 提前致谢。

From chrome code (aka. privileged code) you can construct DOM File objects simply by just invoking the File constructor with a path: chrome代码(也称为特权代码),您只需通过调用带有路径的File构造函数即可构建DOM File对象:

var file = File("path/to/some/file");
fd.append("file", file);

For more information see: Using the DOM File API in chrome code . 有关更多信息,请参阅: 在chrome代码中使用DOM File API

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM