我正试图通过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(file)
function doUpload(el){
file = el.target.result;
XMLHttpRequest.prototype.sendAsBinary = function(string) {
var bytes = Array.prototype.map.call(string, function(c) {
return 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 boundary = 'ohaiimaboundary';
xhr.setRequestHeader(
'Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.sendAsBinary([
'--' + boundary,
'Content-Disposition: form-data; name="file"; filename="test.jpg"',
'Content-Type: multipart/form-data',
'',
file,
'--' + boundary + '--'
].join('\r\n'));
}
谢谢
编辑:想出这个,有点,这应该工作一点点修改(png硬编码)
function doUpload(fl){
var file = 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] = lowbyte;
bb.append(data);
}
}
var blob = bb.getBlob();
this.send(blob);
}
var xh = new XMLHttpRequest();
xh.open('post', 'http://upload.domain.com/u.php', true);
xh.onreadystatechange = function(){
if(this.readyState != 4){
return;
}
else{
console.log(this.responseText);
}
};
var boundary = '--fgsfds--';
xh.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
xh.sendAsBinary([
'--' + boundary,
'Content-Type: image/png',
'Content-Disposition: form-data; name="file"; filename="testz.png"',
'',
file,
'--' + boundary + '--',
''].join('\n'));
}
function mkUpload(){
var r = new FileReader();
r.onloadend = doUpload;
r.readAsBinaryString(document.upload.file.files[0]);
}
测试PHP:
<?
echo sprintf('<pre>%s</pre>', print_r($_FILES, true));
?>
1 回答
其实,你试过
xhr.send(FormData)
吗? FormData允许您附加File对象,这些对象将被视为二进制内容,并与XHR一起使用它发送multipart / form-data . 没有必要自己构建它 .