从 chrome 扩展上传到 php $FILE答案

【问题标题】：upload to php $_FILE from chrome extension从 chrome 扩展上传到 php $FILE
【发布时间】：2011-07-20 22:46:00
【问题描述】：

我正在尝试通过 POST 使用 javascript 将图像上传到我无法修改其来源的网站。

页面有一个表单可以让你上传图片：
<form enctype="multipart/form-data" action="/u.php" method="post"> <input name="file" type="file"> <input type="submit" value="Upload File"> </form>

我希望能够使用 javascript 上传图片，但我什么都做不了，我不确定这是否可能......

到目前为止我的 JS：

file = document.getElementById('fileinput').files[0]; r = new FileReader(); r.onloadend = doUpload; r.readAsBinaryString(文件) 函数doUpload（el）{ 文件 = el.target.result； XMLHttpRequest.prototype.sendAsBinary = 函数（字符串）{ var bytes = Array.prototype.map.call(string, function(c) { 返回 c.charCodeAt(0) & 0xff; }); this.send(new Uint8Array(bytes).buffer); }; var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://upload.domain.com/u.php', true); var 边界 = 'ohaiimaboundary'; xhr.setRequestHeader( '内容类型'，'多部分/表单数据；边界='+边界）； xhr.sendAsBinary([ '--' + 边界， '内容配置：表单数据；名称=“文件”；文件名="test.jpg"', '内容类型：多部分/表单数据'， '', 文件， '--' + 边界 + '--' ].join('\r\n')); }

谢谢

编辑：想出了这个，有点，这应该稍微修改一下（png是硬编码的）

函数doUpload（fl）{ var 文件 = fl.target.result; XMLHttpRequest.prototype.sendAsBinary = function(datastr) { var bb = new BlobBuilder(); var data = new ArrayBuffer(1); var ui8a = new Uint8Array(data, 0); for (var i in datastr) { if (datastr.hasOwnProperty(i)) { var chr = datastr[i]; var charcode = chr.charCodeAt(0) var lowbyte = (charcode & 0xff) ui8a[0] = 低字节； bb.append（数据）； } } var blob = bb.getBlob(); this.send(blob); } var xh = new XMLHttpRequest(); xh.open('post', 'http://upload.domain.com/u.php', true); xh.onreadystatechange = 函数（）{ 如果（this.readyState！= 4）{ 返回; } 别的{ 控制台.log(this.responseText); } }; var 边界 = '--fgsfds--'; xh.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); xh.sendAsBinary([ '--' + 边界， '内容类型：图片/png', '内容配置：表单数据；名称=“文件”；文件名="testz.png"', '', 文件， '--' + 边界 + '--', ''].join('\n')); } 函数 mkUpload(){ var r = new FileReader(); r.onloadend = doUpload; r.readAsBinaryString(document.upload.file.files[0]); }

测试 PHP：

&lt? echo sprintf('

%s

', print_r($_FILES, true)); ?>

【问题讨论】：

你的错误是什么？哪个部分不起作用？什么有效？
没有错误。如果我在其中执行一个 onload 函数，responseText 是空白的（应该包含一些 html）

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

其实你试过xhr.send(FormData)吗？ FormData 允许您附加文件对象，将被视为二进制内容并使用它与 XHR 一起发送一个 multipart/form-data。没有必要自己构建它。

var formData = new FormData();

var file = document.querySelector('input[type="file"]').files[0];
if (file) {
  formData.append("file", file);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '/u.php', true);
xhr.onload = function(e) { ... };
xhr.send(formData);

【讨论】：