• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧

HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5实现图片上传,html5上传等相关知识,匿名希望在学习及工作中可以帮助到您
一、展示
因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有

解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示的内容可以做成自己想要的样子。代码如下:

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

二、JS代码
我这边写的蛮简单的,只是用了下h5上传的的基本功能
html代码如下,action为要请求的路径,我这边做的是当文件发生改变时就上传修改头像,input标签的name属性不能省去,具体跟后端接口有关

以上内容给大家分享了HTML5实现简单图片上传所遇到的问题及解决办法的相关知识,希望对大家有所帮助。

您可能想查找下面的文章:

  • HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧

相关文章

  • 2018-12-03HTML5响应式分步定制商品模板
  • 2018-12-03集成UEditor富文本编辑器的方法
  • 2018-12-03HTML5有哪些创意类型?
  • 2018-12-03怎样实现前端裁剪上传图片功能
  • 2017-08-06HTML5进度条特效
  • 2017-08-06html5实现多文件的上传示例代码
  • 2018-12-03SVG进阶|SVG剪裁路径
  • 2018-12-03HTML5表单新增元素与属性
  • 2018-12-03android ios h5 接私活哪个挣钱多?
  • 2018-12-03为何说 HTML5「no longer based on SGML」?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 虚拟键盘出现挡住输入框的解决办法
    • jquery on bind之间有什么区别
    • 24个canvas基础知识小结
    • H5手机端图片上传插件代码
    • HTML5的WebSocket详解
    • H5开发:实现消灭星星游戏的详细内容
    • 用html5实现语音搜索框的方法_html5教程技巧
    • HTML5之语义标签介绍
    • 详解HTML5的限制验证
    • webvtt字幕文件于srt等字幕文件如何相互转化呢?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有