<meta name="keywords" content="华夏棋牌,html5完成图片上传,html5上传" />
华夏棋牌 > web前端 > H5教程 > 注释

HTML5完成质朴图片上传所遇到的效果及处置赏罚赏罚措施 _html5教程手艺

原创 2016-05-16 15:46:05 0 233
赞助会员专享特权
一、展示
由于前端上传文件是必须经由历程form表单的,不克不及应用ajax,这样的话一个移动页面放入一个type为file的input至心不怎样悦目,以下图,很挫有没有

处置赏罚赏罚措施找了下,PC上有些是把这个input换成flash,接纳jquery的工具库好比uploadify来做,然则移动端年夜部门浏览器是不支持flash的。以是最后接纳的措施照样用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示的内容可以做资自己想要的面目。代码以下:

复制代码
代码以下:









华夏棋牌




上传图片








面目如上图,这样展示就在“上传图片”这个p标签中,点击它就有选择file的效果

2、JS代码
我这边写的蛮质朴的,只是用了下h5上传的的基本功效
html代码以下,action为要请求的蹊径,我这边做的是当文件发生改变时就上传修改头像,input标签的name属性不克不及省去,详细跟后端接口有关

复制代码
代码以下:




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完成质朴图片上传所遇到的效果及处置赏罚赏罚措施的相关知识,欲望对年夜家有所赞助。

php中文网最新课程二维码
  • 相关标签:html5完成图片上传 html5上传
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • HTML5完成质朴图片上传所遇到的效果及处置赏罚赏罚措施 _html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173800)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169976)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137299)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130655)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129986)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节