Профиль | Публикации (5) | Комментарии (122) | Избранное (116) |
<input id="input_file" type="file" multiple style="position:absolute; top:-999px; visibility:hidden"/>
<div id="button" style="background-color: blue; width: 100px; height:40px;"></div>
<script type="text/javascript">
var input = document.querySelector("#input_file");
var btn = document.querySelector("#button");
btn.onclick = function () {
input.click();
};
</script>
var files;
var reader = new FileReader();
var cv = document.createElement("canvas");
var cvContext = cv.getContext("2d");
input.onchange = function () {
files = input.files;
reader.readAsDataURL(files[0]);
};
reader.onload = function (e) {
var im = new Image();
im.onload = function (e) {
cv.width = 100;
cv.height = 100;
cvContext.drawImage(im, 0, 0, 100, 100);
// здесь мы должны достать миниатюру из canvas и передать её на сервер вместе с оригиналом
}
im.src = reader.result;
};
var blobData = cv.mozGetAsFile(name, files[0].type);
var form = new FormData();
form.append("Filedata0", files[0]);
form.append("Filedata1", blobData);
var xhr = new XMLHttpRequest();
xhr.open("POST", "load.php", true);
xhr.onload = function () {
console.log(this.response);
}
xhr.upload.onprogress = function (e) {
console.log(e.position / e.totalSize) * 100;
}
xhr.send(form);
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
//получаем данные в виде base64, второй параметр задает качество (от 0 до 1)
var sBase64 = canva.toDataURL(type, 1);
var aBase64 = sBase64.split(',');
//раскодируем обратно
var sData = atob(aBase64[1]);
var aBufferView = new Uint8Array(sData.length);
//создаем ArrayBuffer на основе строки
for (var i = 0; i < aBufferView.length; i++) {
aBufferView[i] = sData.charCodeAt(i);
}
// с помощью BlobBuilder переводим в blob
var builder = new BlobBuilder();
builder.append(aBufferView.buffer);
var blobData = builder.getBlob(type);
var sBase64 = canva.toDataURL(type, 1);
var aBase64 = sBase64.split(',');
var sData = atob(aBase64[1]);
var aBufferView = new Uint8Array(sData.length);
for (var i = 0; i < aBufferView.length; i++) {
aBufferView[i] = sData.charCodeAt(i);
}
var fBuilder = new FormBuilder();
fBuilder.addFile(aBufferView);
var form = fBuilder.getForm();
var xhr = new XMLHttpRequest();
xhr.open("POST", "load.php", true);
xhr.onload = function () {
alert(this.response);
}
xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary=' + fBuilder.BOUND);
xhr.send(form);
function FormBuilder() {
this.getBoundary = function () {
var _boundary = "";
for (var i = 0; i < 0x20; i++) {
_boundary += String.fromCharCode(97 + Math.random() * 25);
}
return _boundary;
}
this.addFile = function (name, buffer) {
var sHeader = this.ADDB + this.BOUND;
sHeader += this.ENTER;
sHeader += 'Content-Disposition: form-data; name="Filedata' + this.index + '"; filename="' + name + '"';
sHeader += this.ENTER;
sHeader += 'Content-Type: application/octet-stream';
sHeader += this.ENTER;
sHeader += this.ENTER;
this.index++;
this.header = this.sumBuffers(this.header, this.StrToBuffer(sHeader), buffer, this.EnterBuffer);
}
this.addParam = function (name, value) {
var sHeader = this.ADDB + this.BOUND;
sHeader += this.ENTER;
sHeader += 'Content-Disposition: form-data; name="'+ name + '"';
sHeader += this.ENTER;
sHeader += this.ENTER;
sHeader += value;
sHeader += this.ENTER;
this.header = this.sumBuffers(this.header, this.StrToBuffer(sHeader));
}
this.getForm = function () {
var sHeader = this.ENTER;
sHeader += this.ENTER;
sHeader += (this.ADDB + this.BOUND + this.ADDB);
var aHeader = this.StrToBuffer(sHeader);
return this.sumBuffers(this.header, aHeader).buffer;
}
this.StrToBuffer = function (str) {
var buffer = new Uint8Array(str.length);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = str.charCodeAt(i);
}
return buffer;
}
this.sumBuffers = function () {
var sumLength = 0, position = 0, aSumHeader;
for (var i = 0; i < arguments.length; i++) {
sumLength += arguments[i].length;
}
aSumHeader = new Uint8Array(sumLength);
for (var i = 0; i < arguments.length; i++) {
aSumHeader.set(arguments[i], position);
position += arguments[i].length;
}
return aSumHeader;
}
this.BOUND = this.getBoundary();
this.ENTER = "\r\n";
this.EnterBuffer = this.StrToBuffer(this.ENTER);
this.ADDB = "--";
this.index = 0;
this.header = new Uint8Array(0);
}
foreach($_FILES as $key => $value){
$filename = substr_replace($key, '.', -4, 1);
move_uploaded_file($value['tmp_name'], $filename);
}
echo 'complete';
Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.
Комментарии (39)