因为前端上传文件是必须通过form表单的

简单来讲记录下明晚做H5上传中一些代码还或者有坑

一、展示

因为前端上传文件是必得透过form表单的,不能够运用ajax,那样的话一个运动页面放入贰个type为file的input真心不怎么雅观,如下图,很挫有未有

消弭办法找了下,PC上稍稍是把那些input换到flash,选用jquery的工具库举例uploadify来做,不过运动端超过二分之一浏览器是不扶持flash的。所以最后接纳的主意依旧用form表单的花样,只是把这么些form和input的光滑度设置为0,让它们和筹划呈现的从头到尾的经过还要在二个div中,展现的内容能够做成自个儿想要的表率。代码如下:

    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;} .upload form input{width: 100%;}          

规范如图,那样表现就在“上传图片”这么些p标签中,点击它就有选择file的职能

二、JS代码

www.602.net,自身那边写的蛮不难的,只是用了下h5上传的的基本效能

html代码如下,action为要倡议的门路,小编那边做的是当文件爆发变动时就上传改进头像,input标签的name属性不能够省去,具体跟后端接口有关

var iMaxFilesize = 2097152; //2Mwindow.fileSelected = function() { var oFile = document.getElementById.files[0]; //读取文件 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; if (!rFilter.test { alert; return; } if (oFile.size > iMaxFilesize) { alert; return; } var vFD = new FormData(document.getElementById, //建立请求和数据 oXHR = new XMLHttpRequest(); oXHR.addEventListener('load', function { //成功 }, false); oXHR.addEventListener { //失败 }, false); oXHR.addEventListener { //上传中断 }, false); oXHR.open; oXHR.send;};

细节决定成败,所以做其余职业都要认真对照。

以上正是本文的全体内容,希望对大家的上学抱有助于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注