移动项目前端小结（三）

formdata上传注意点

　　formdata能上传blob；因此若需要上传文件时可以先转化为blob形式，再上传。

//file类型转为blob过程：先将file转为dataURL,再把dataURL转成blob;

var reader = new FileReader();
reader.onload = function (e) {
　　var dataurl=e.target.result;
　　var arr = dataurl.split(","); //dataurl是base64形式的长字符串，需要截取出字符串中“,”后边的编码
　　convertToBlob(arr[1],"image/jpeg");//dataurl转成blob;
}
reader.readAsDataURL(file);   //file是通过<input type="file">控件打开文件选择窗口后选择的文件;


function convertToBlob(base64Str, fileType) {
　　var base64 = window.atob(base64Str);
　　var len = base64.length;
　　var buff = new ArrayBuffer(len);
　　var uarr = new Uint8Array(buff);

　　for (var i = 0; i < len; i++) {
　　　　uarr[i] = base64.charCodeAt(i);
　　}
　　var blob = null;

　　try {  //创建blob的兼容性写法
　　　　blob = new Blob([buff], { type: fileType });
　　} catch (e) {
　　　　var BlobBuilder = window.BlobBuilder = (
　　　　　　window.BlobBuilder ||
　　　　　　window.WebKitBlobBuilder ||
　　　　　　window.MozBlobBuilder ||
　　　　　　window.MSBlobBuilder
　　　　);

　　　　if (e.name === "TypeError" && BlobBuilder) {
　　　　　　var builder = new BlobBuilder();
　　　　　　builder.append(buff);
　　　　　　blob = builder.getBlob(fileType);
　　　　}else{
　　　　　　alert('设备版本过低，请更换设备！')
　　　　}
　　}

　　/*formData.append("filename", blob, ‘文件名.后缀’*/  //此处第三个参数最好穿入带后缀名的文件名，防止被后台视为无效文件。

　　return blob;
}

 

文件类型数据转成URL(兼容性写法)

function getObjectURL(file){    
	var url=null;
	if(window.createObjectURL!=undefined){ // basic    
		url=window.createObjectURL(file);
	}else if(window.URL!=undefined){ // mozilla(firefox)    
		url=window.URL.createObjectURL(file); 
	} else if(window.webkitURL!=undefined){ // webkit or chrome    	
		url=window.webkitURL.createObjectURL(file);
	}    
	return url;  
}　

微信浏览器中元素的背景图片问题

　　用微信浏览器打开html文件时背景图片无法显示，background-image、background：url()与图片相关的属性不起作用；

DOM元素绑定事件时传参

　　选中元素.bind('事件类型如：click',{参数名：参数值}，函数名如：submitcb)

　　函数中通过event的data属性获取传过来的参数值如：

function submitcb(event){
　　console.log(event.data.参数名)
}

移动端IOS10以上Safari页面不能禁止缩放问题

　　以下代码转载自：互联网学徒的掘金文章

window.onload=function () {
	document.addEventListener('touchstart',function (event) {
	  if(event.touches.length>1){
	    event.preventDefault();
	  }
	});
	var lastTouchEnd=0;
	document.addEventListener('touchend',function (event) {
	  var now=(new Date()).getTime();
	  if(now-lastTouchEnd<=300){
	    event.preventDefault();
	  }
	  lastTouchEnd=now;
	},false);
	document.addEventListener('gesturestart', function (event) {
	  event.preventDefault();
	});
}

　　注意：双击放大可以禁止，双指放大仍有bug

移动端  用伪元素实现右箭头 >

　　参考自jquery weui框架

div::before{
	content: " ";
	display: inline-block;
	height: 6px;
	width: 6px;
	border-width: 2px 2px 0 0;
	border-color: #c8c8cd;
	border-style: solid;
	-webkit-transform: matrix(.71,.71,-.71,.71,0,0);
	transform: matrix(.71,.71,-.71,.71,0,0);
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -4px;
}

/*
matrix(-.71,.71,.71,.71,0,0)：左箭头 <
matrix(.71,-.71,.71,.71,0,0)：上箭头 
matrix(.71,.71,.71,-.71,0,0)：下箭头
*/

移动端 用伪元素实现1px边框

　　在移动端若设置的边框大小为1px，效果看起来会比较粗，不像是1px，可以通过缩小达到目的。

div::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 2;
}