【澳门金沙5wk.com】2上传图片显示字节数为0的解决办法,关于安卓手机微信浏览器中使用XMLHttpRequest

有关安卓手提式有线电电话机微信浏览器中央银行使XMLHttpRequest 2上传图片展示字节数为0的化解办法,安卓xmlhttprequest

 前端JS中选用XMLHttpRequest
2上传图片到服务器,PC端和大大多有线电话上都例行,但在少一些安卓手机上上传失利,服务器上查看图片,突显字节数为0。上面是上传图片的中坚代码:

HTML

<input type="file" id="choose" capture="camera" accept="image/*"> 
JavaScript
var filechooser = document.getElementById("choose");
filechooser.onchange = function () {
var _this = $(this);
if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > 1) {
alert("一次只能上传1张图片");
return;
}
files.forEach(function (file, i) {
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
var reader = new FileReader();
reader.onload = function () {
var result = this.result;
upload(result, file.type);
};
reader.readAsDataURL(file);
});
};
function upload(basestr, type){
var xhr = new XMLHttpRequest();
var text = window.atob(basestr.split(",")[1]);
var buffer = new Uint8Array(text.length);
var pecent = 0;
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
var blob = getBlob(buffer, type);
var formdata = new FormData();
formdata.append('imagefile', blob);
xhr.open('post', '/uploadtest');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var jsonData = JSON.parse(xhr.responseText);
console.log(jsonData);
}
};
//利用progress事件显示数据发送进度
xhr.upload.addEventListener('progress', function (e) {
pecent = ~~(100 * e.loaded / e.total) / 2;
// 利用pecent来显示上传进度
}, false);
xhr.send(formdata);
}
function getBlob(buffer, format){
var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
if(Builder){
var builder = new Builder();
builder.append(buffer);
return builder.getBlob(format);
} else {
return new window.Blob([ buffer ], {type: format});
}
} 

  上述代码应用FormData来贯彻表单数据提交。FormData是一种针对XHRubicon2设计的摩登数据类型,使用它大家能够很便利地实时以JavaScript创立HTML
<Form>,然后经过AJAX提交该表单。在上述代码中,提交的表单中的字段名叫imagefile,值是blob,那是三个因此getBlob函数构造并回到的文件Blob。通过该方法上传文件简单直观。

  然后大家在服务端接收并保存图片,并赶回已上传的图纸的新闻。

下边是Node.js代码的言传身教:

var Q = require('q');
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');
var moment = require('moment');var imageUpload = function (){ };
imageUpload.prototype.useFormParseCallback = function(req){
var deferred = Q.defer();
var form = new formidable.IncomingForm();
form.parse(req, deferred.makeNodeResolver());
return deferred.promise;
};
imageUpload.prototype.uploadImageTest = function(req){
var pathName = 'uploadImgs/dealInfo/';
var uploadPath = path.join(__dirname, '../../public/', pathName);
return this.useFormParseCallback(req).then(function(files){
var file = files[1].imagefile;
var fileType = files[1].imagefile.type.split('/')[1];
var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;
var readStream = fs.createReadStream(file.path);
var writeStream = fs.createWriteStream(uploadPath + newFileName);
var deferred = Q.defer();
readStream.pipe(writeStream);
readStream.on('end', deferred.makeNodeResolver());
return deferred.promise.then(function() {
fs.unlinkSync(file.path);
return {
fileName: newFileName,
filePath: '/' + pathName + newFileName,
fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
};
});
});
};
module.exports = imageUpload;

  大家选拔formidable那个包来接收上传文件的数目,然后将文件保留到/public/uploadImgs/dealInfo目录下(假定已在express中校public设置为static的根目录),并将图片依据钦点的平整重命名,以保障上传图片不会因为名称同样而被遮盖。其它,代码中应用Q来制止直接运用回调函数,以越来越好地对函数成效实行分离。

  下面的代码在PC端浏览器以及大多数主流移动装备上都能平常职业,不过少部分Android设备上却会冒出上传的图纸字节数为0的场馆。具体的缘故大家能够看上面多少个网页中的描述:

  便是说那么些是Android的贰个bug!

  这如何减轻吗?

  其实从上边给出的页面中得以找到答案,正是大家得换一种文件上传格局。在XH安德拉2中,除了以Blob的点子上传文件外,还足以ArrayBuffer的点子上传文件。

下边是修改之后的前端JavaScript代码:

var filechooser = document.getElementById("choose");
filechooser.onchange = function () {
var _this = $(this);
if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > 1) {
alert("一次只能上传1张图片");
return;
}
files.forEach(function (file, i) {
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
var reader = new FileReader();
reader.onload = function () {
var result = this.result;
upload(result, file.type);
};
reader.readAsDataURL(file);
});
};
function upload(basestr, type){
var xhr = new XMLHttpRequest();
var text = window.atob(basestr.split(",")[1]);
var buffer = new Uint8Array(text.length);
var pecent = 0;
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
xhr.open('post', '/uploadtest?filetype=' + type.split('/')[1]);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var jsonData = JSON.parse(xhr.responseText);
console.log(jsonData);
}
};
//利用progress事件显示数据发送进度
xhr.upload.addEventListener('progress', function (e) {
pecent = ~~(100 * e.loaded / e.total) / 2;
// 利用pecent来显示上传进度
}, false);
xhr.send(buffer.buffer); // 以ArrayBuffer的方式上传图片
}

  作者将有变化的地点加了高亮彰显。以ArrayBuffer情势上传图片必须增加’application/octet-stream’的RequestHeader,不然服务器无法响应央浼。其余,通过这种方法上传图片大家也不能够从表单数据中得到到文件类型,能够将文件类型以query的诀要传到服务器,然后服务器依据文件类型来扭转对应的文件,以下是通过小量修改之后的服务器代码:

imageUpload.prototype.uploadImageTest = function(req){
var pathName = 'uploadImgs/dealInfo/';
var uploadPath = path.join(__dirname, '../../public/', pathName);
return this.useFormParseCallback(req).then(function(files){
var file = files[1].file;
var fileType = req.query.filetype ? ('.' + req.query.filetype) : '.png';
var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;
var readStream = fs.createReadStream(file.path);
var writeStream = fs.createWriteStream(uploadPath + newFileName);
var deferred = Q.defer();
readStream.pipe(writeStream);
readStream.on('end', deferred.makeNodeResolver());
return deferred.promise.then(function() {
fs.unlinkSync(file.path);
return {
fileName: newFileName,
filePath: '/' + pathName + newFileName,
fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
};
});
});
};

  修改将来的代码能够支撑Android手提式无线电话机,包罗微信浏览器。注意不是独具的Android手提式有线电电话机都会存在该难题,假如您发觉在Andriod手提式有线话机上无法上传图片,越发是在微信浏览器中,则能够尝试下方面包车型大巴措施。

以上所述是作者给大家介绍的关于安卓手提式有线电话机微信浏览器中使用XMLHttpRequest
2上传图片展现字节数为0的消除办法,希望对大家有着帮助!

2上传图片显示字节数为0的解决办法,安卓xmlhttprequest
前端JS中动用XMLHttpRequest 2上传图片到服务…

上面是修改之后的前端JavaScript代码:

  前端JS中使用XMLHttpRequest
2
上传图片到服务器,PC端和大大多有线电话上都例行,但在少一些安卓手提式有线电话机上上传战败,服务器上查看图片,显示字节数为0。上边是上传图片的主导代码:

  我们利用formidable那几个包来接收上传文件的数据,然后将文件保留到/public/uploadImgs/dealInfo目录下(假定已在express上校public设置为static的根目录),并将图纸根据钦命的条条框框重命名,以管教上传图片不会因为名称一样而被遮住。此外,代码中选拔Q来防止直接选用回调函数,以更加好地对函数成效拓展分离。

var Q = require('q');
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');
var moment = require('moment');var imageUpload = function (){ };

imageUpload.prototype.useFormParseCallback = function(req){
    var deferred = Q.defer();

    var form = new formidable.IncomingForm();
    form.parse(req, deferred.makeNodeResolver());
    return deferred.promise;
};

imageUpload.prototype.uploadImageTest = function(req){
    var pathName = 'uploadImgs/dealInfo/';
    var uploadPath = path.join(__dirname, '../../public/', pathName);

    return this.useFormParseCallback(req).then(function(files){
        var file = files[1].imagefile;
        var fileType = files[1].imagefile.type.split('/')[1];
        var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;

        var readStream = fs.createReadStream(file.path);
        var writeStream = fs.createWriteStream(uploadPath + newFileName);

        var deferred = Q.defer();
        readStream.pipe(writeStream);
        readStream.on('end', deferred.makeNodeResolver());
        return deferred.promise.then(function() {
            fs.unlinkSync(file.path);
            return {
                fileName: newFileName,
                filePath: '/' + pathName + newFileName,
                fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
            };
        });
    });
};

module.exports = imageUpload;
imageUpload.prototype.uploadImageTest = function(req){
var pathName = 'uploadImgs/dealInfo/';
var uploadPath = path.join(__dirname, '../../public/', pathName);
return this.useFormParseCallback(req).then(function(files){
var file = files[1].file;
var fileType = req.query.filetype ? ('.' + req.query.filetype) : '.png';
var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;
var readStream = fs.createReadStream(file.path);
var writeStream = fs.createWriteStream(uploadPath + newFileName);
var deferred = Q.defer();
readStream.pipe(writeStream);
readStream.on('end', deferred.makeNodeResolver());
return deferred.promise.then(function() {
fs.unlinkSync(file.path);
return {
fileName: newFileName,
filePath: '/' + pathName + newFileName,
fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
};
});
});
};
imageUpload.prototype.uploadImageTest = function(req){
    var pathName = 'uploadImgs/dealInfo/';
    var uploadPath = path.join(__dirname, '../../public/', pathName);

    return this.useFormParseCallback(req).then(function(files){
        var file = files[1].file;
        var fileType = req.query.filetype ? ('.' + req.query.filetype) : '.png';
        var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;

        var readStream = fs.createReadStream(file.path);
        var writeStream = fs.createWriteStream(uploadPath + newFileName);

        var deferred = Q.defer();
        readStream.pipe(writeStream);
        readStream.on('end', deferred.makeNodeResolver());
        return deferred.promise.then(function() {
            fs.unlinkSync(file.path);
            return {
                fileName: newFileName,
                filePath: '/' + pathName + newFileName,
                fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
            };
        });
    });
};

  上述代码应用FormData来兑现表单数据交由。FormData是一种针对XHRAV42设计的新型数据类型,使用它我们得以很有益地实时以JavaScript成立HTML
<Form>,然后通过AJAX提交该表单。在上述代码中,提交的表单中的字段名字为imagefile,值是blob,那是三个透过getBlob函数构造并回到的公文Blob。通过该情势上传文件轻易直观。

参照页面:

您恐怕感兴趣的篇章:

  • TP3.2批量上传文件或图片
    同名争执难点的消除措施
  • Android使用OkHttp上传图片的实例代码
  • C# 中完毕ftp
    图片上传功效(多快好省)
  • Android中Okhttp3完毕上传多张图片同期传递参数
  • iOS通过http post上传图片
  • http图片上传安全性难题 根据ContentType (MIME)
    判别其实不规范、不安全
  • ThinkPHP5.0
    图片上传生成缩略图实例代码表达

  上述代码应用【澳门金沙5wk.com】2上传图片显示字节数为0的解决办法,关于安卓手机微信浏览器中使用XMLHttpRequest。FormData【澳门金沙5wk.com】2上传图片显示字节数为0的解决办法,关于安卓手机微信浏览器中使用XMLHttpRequest。来完结表单数据交由。FormData是一种针对XHR2统筹的风行数据类型,使用它我们得以很方便地实时以JavaScript创立HTML
<Form>,然后通过AJAX提交该表单。在上述代码中,提交的表单中的字段名称为imagefile,值是blob,那是三个透过getBlob函数构造并赶回的公文【澳门金沙5wk.com】2上传图片显示字节数为0的解决办法,关于安卓手机微信浏览器中使用XMLHttpRequest。Blob【澳门金沙5wk.com】2上传图片显示字节数为0的解决办法,关于安卓手机微信浏览器中使用XMLHttpRequest。。通过该措施上传文件轻便直观。

HTML

上述所述是小编给大家介绍的有关安卓手提式有线电话机微信浏览器中使用XMLHttpRequest
2上传图片展现字节数为0的化解办法,希望对我们有着扶助!

  便是说这一个是Android的一个bug!

下边是Node.js代码的演示:

相关文章