HTML5完成简易照片提交所遇到的难题及处理方法

日期:2021-01-19 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

 1、展现
由于前端开发提交文档是务必根据form表单的,不可以应用ajax,这样的话1个挪动网页页面放入1个type为file的input真心实意不如何漂亮,以下图,很挫有木有

处理方法找了下,PC上一些是把这个input换为flash,选用jquery的专用工具库例如uploadify来做,可是挪动端绝大多数访问器是不适用flash的。因此最终选用的方法還是用form表单的方式,只是把这个form和input的全透明度设定为0,让它们和提前准备显示信息的內容另外在1个div中,显示信息的內容能够做成自身要想的模样。编码以下:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style>
div{width: 100%;}
.logo img{display:block; margin:0 auto;}
.upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
margin: 0 auto;
}
.upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
.upload form input{width: 100%;}
</style>
</head>
<body>
<div class="logo">
<img src="img/1.jpg" />
</div>
<div class="upload">
<p>提交照片</p>
<form>
<input type="file" />
</form>
</div>
</body>
</html>

模样如上图,这样呈现就在“提交照片”这个p标识中,点一下它就有挑选file的实际效果

2、JS编码
我这边写的蛮简易的,只是用了下h5提交的的基础作用
html编码以下,action为要恳求的相对路径,我这边做的是当文档产生更改时就提交改动头像,input标识的name特性不可以省去,实际跟后端开发插口相关

拷贝编码
编码以下:

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
<input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />
</form>
var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
var oFile = document.getElementById('imageFile').files[0]; //载入文档
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (!rFilter.test(oFile.type)) {
alert("文档文件格式务必为照片");
return;
}
if (oFile.size > iMaxFilesize) {
alert("照片尺寸不可以超出2M");
return;
}
var vFD = new FormData(document.getElementById('uploadForm')), //创建恳求和数据信息
oXHR = new XMLHttpRequest();
oXHR.addEventListener('load', function(resUpload) {
//取得成功
}, false);
oXHR.addEventListener('error', function() {
//不成功
}, false);
oXHR.addEventListener('abort', function() {
//提交终断
}, false);
oXHR.open('POST', actionUrl);
oXHR.send(vFD);
};

以上內容给大伙儿共享了HTML5完成简易照片提交所遇到的难题及处理方法的有关专业知识,期待对大伙儿有一定的协助。