WebUploader 安卓微信上传图片

Question

安卓手机微信浏览器上传JPG图片  显示上传图片成功后在服务器中查看图片字节数为0  IOS一切正常 但是安卓就不行  请问那位知道这是为什么

Answer 1

webuploader没对移动端做兼容。android对于 FormData 类型支持有问题，也有解决办法（自己构造发送数据）

FormDataShim: function() {
	// Store a reference to this
	var o = this,
		parts = [],// Data to be sent
		boundary = Array(21).join('-') + (+new Date() * (1e16*Math.random())).toString(36),
		oldSend = XMLHttpRequest.prototype.send;

	this.append = function (name, value, filename) {
		parts.push('--' + boundary + 'rnContent-Disposition: form-data; name="' + name + '"');

		if (value instanceof Blob) {
			parts.push('; filename="'+ (filename || 'blob') + '"rnContent-Type: ' + value.type + 'rnrn');
			parts.push(value);
		}
		else {
			parts.push('rnrn' + value);
		}
		parts.push('rn');
	};

	// Override XHR send()
	XMLHttpRequest.prototype.send = function (val) {
		var fr,
			data,
			oXHR = this;

		if (val === o) {
			//注意不能漏最后的/r/n ,否则有可能服务器解析不到参数.
			parts.push('--' + boundary + '--' + 'rn');
			data = new XBlob(parts);
			fr = new FileReader();
			fr.onload = function () { oldSend.call(oXHR, fr.result); };
			fr.onerror = function (err) { throw err; };
			fr.readAsArrayBuffer(data);

			this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
			XMLHttpRequest.prototype.send = oldSend;
		}
		else {
			oldSend.call(this, val);
		}
	};
}

var needsFormDataShim = (function () {
		var bCheck = ~navigator.userAgent.indexOf('Android')
						&& ~navigator.vendor.indexOf('Google')
						&& !~navigator.userAgent.indexOf('Chrome');

		return bCheck && navigator.userAgent.match(/AppleWebKit/(d+)/).pop() <= 534;
	})(),
	blobConstruct = !!(function () {
		try { return new Blob(); } catch (e) {}
	})(),
	XBlob = blobConstruct ? window.Blob : function (parts, opts) {
		var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);
		parts.forEach(function (p) {
			bb.append(p);
		});

		return bb.getBlob(opts ? opts.type : undefined);
	};



var fd = needsFormDataShim ? new px.FormDataShim() : new FormData();
fd.append('userfile', blob, $form.find("input[name='pxupload_imgname']").val());

$form.find(':input').each(function() {
	if (this.type != 'file') {
		fd.append($(this).attr('name'), $(this).val());
	}
});

jqxhr = $.ajax({
	url: action,
	cache: false,
	data: fd,
	type: 'POST',
	processData: false,
	contentType: false,
	dataType: 'json',
	xhr: function() {
		var req = $.ajaxSettings.xhr();
		if (req) {
			try {
				req.upload.addEventListener('progress', function(e){
					//Display progress Percentage
					if (e.lengthComputable) {
						progress = e.loaded ? Math.round(e.loaded * 100 / e.total) : 0;
						$percentage.text(progress + '%');
						$progressBar.val(progress);
					}
				}, false);
			}
			catch (e) {
				return req;
			}
		}
		return req;
	}
})
.success(function(data) {
 // ............
})

Answer 2

如果用二进制方案 怎么用.net接收呢 我用Request.Files[0] 接收不到

Answer 3

回复
.net 我不是很了解，可以尝试一下形如这种的形式 Request.InputStream ····

Answer 4

回复
虽然还是没搞定 但是谢谢了

Answer 5

回复
https://github.com/fex-team/webuploader/issues/81 搜索关键字 .net 是有现有例子满足你的业务需求的··

Answer 6

上传请求内容为空，这是 android 4 的一个bug，只要 file 的 blob数据修改过，通过 xhr2 去发送就有这个问题。 详情：https://code.google.com/p/android/issues/detail?id=39882

解决方案： 发送的时候采用二进制方案，即 把 sendAsBinary 设置成true, 通过这种方式可以避免这个问题。后端接受需要小改动一下。

https://github.com/fex-team/webuploader/issues/185