网页上传图片失败,html5上传图片代码

　　首先，展示

　　因为文件的前端上传必须通过form表单，而ajax是不能用的，所以一个移动页面放到一个file类型的输入里真的不好看，如下图。令人沮丧吗？

　　解决办法已经找到。有些PC把这个输入改成flash，用jquery的工具库比如uploadify来做。然而，移动终端上的大多数浏览器都不支持flash。所以最后的方法就是使用form form，只要把这个form和input的透明度设置为0，让它们和要显示的内容同时在一个div里，显示的内容就可以随心所欲了。代码如下：复制代码。代码如下：

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=UTF-8

　　meta name= viewport content= width=device-width，initial-scale=1.0，user-scalable=no

　　标题/标题

　　风格

　　div {宽度：100%；}。logo img { display:block；边距：0自动；}。上传{位置：相对；宽度：80px高度：18px行高：18px背景：# 2 fc 7c 9；文本对齐：居中；

　　颜色：# FFF；填充：0px 5px-WebKit-border-radius:2px；边框-半径：2px

　　边距：0自动；

　　}。上传表单{宽度：100%；位置：绝对；左：0；top:0；不透明度：0；滤镜：alpha(不透明度=0)；}。上传表单输入{宽度：100%；}

　　/风格

　　/头

　　身体

　　div class=logo

　　img src=img/1.jpg /

　　/div

　　div class=上传

　　p上传图片/p

　　形式

　　输入类型=文件/

　　/表单

　　/div

　　/body

　　/html

　　如上图所示，此显示在“上传图片”P页签中，点击会有选择文件的效果。

　　第二，JS代码

　　我这里写的挺简单的，用h5上传的基本功能就行了。

　　html代码如下。动作是被请求的路径。我在这里做的是在文件改变的时候上传修改头像。不能省略输入标记的name属性。与后端接口相关的具体复制代码如下：

　　form id= upload form enctype= multipart/form-data method= post action= XXXXXX

　　输入类型= file name= image file id= image file onchange= files selected()/

　　/表单

　　var iMaxFilesize=2097152//2M

　　window . files selected=function(){

　　var oFile=document . getelementbyid( image file )。文件[0]；//读取文件

　　var r filter=/^(image\/bmpimage\/gifimage\/jpegimage\/pngimage\/tiff)$/i；

　　如果(！rFilter.test(oFile.type)) {

　　Alert(文件格式必须是图片)；

　　返回；

　　}

　　if(of file . size IMAX filesize){

　　Alert(“图像大小不能超过2M”)；

　　返回；

　　}

　　VARD=new formdata(document . getelementbyid( UploadForm ))，//建立请求和数据

　　oXHR=new XMLHttpRequest()；

　　oXHR.addEventListener(load ，函数(resUpload) {

　　//成功

　　}，假)；

　　oXHR.addEventListener(error ，function() {

　　//失败

　　}，假)；

　　oXHR.addEventListener(abort ，function() {

　　//上传中断

　　}，假)；

　　oXHR.open(POST ，action URL)；

　　oxhr . send(vFD)；

　　};

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。