文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么利用HTML5实现图片文件异步上传

2024-04-02 19:55

关注

本篇内容介绍了“怎么利用HTML5实现图片文件异步上传”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构。下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段。我这边的效果预览:

1.文件未选择 2.文件已选择
怎么利用HTML5实现图片文件异步上传 
怎么利用HTML5实现图片文件异步上传 
HTML代码部分:

思路:下面代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮。

代码如下:

<div id="wp" class="warpper"> 
<a id="btnSelect">单击选择要上传的照片</a> 
<input id="uploadFile" type="file" name="myPhoto" /> 
<button id="btnConfirm" class="btn" >确认上传</button> 
</div> 
<div id="maskLayer" class="mask-layer" > 
<p>图片正在上传中...</p> 
</div>


JS图片文件验证部分:

验证部分为:大小,是否已经选择,文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径,依次验证是否为空,文件类型以及文件大小,不满足条件则一律返回

false,满足以上3个条件后,在dom中生成图片预览,添加img元素,然后利用createObjectURL()方法获取预览路径。

代码:

代码如下:

//获取数据的URL地址 
function createObjectURL(blob) { 
if (window.URL) { 
return window.URL.createObjectURL(blob); 
} else if (window.webkitURL) { 
return window.webkitURL.createObjectURL(blob); 
} else { 
return null; 
} 
} 
//文件检测 
function checkFile() { 
//获取文件 
var file = $$("uploadFile").files[0]; 
//文件为空判断 
if (file === null || file === undefined) { 
alert("请选择您要上传的文件!"); 
$$("btnSelect").innerHTML = "单击选择要上传的照片"; 
return false; 
} 
//检测文件类型 
if(file.type.indexOf('image') === -1) { 
alert("请选择图片文件!"); 
return false; 
} 
//计算文件大小 
var size = Math.floor(file.size/1024); 
if (size > 5000) { 
alert("上传文件不得超过5M!"); 
return false; 
}; 
//添加预览图片 
$$("btnSelect").innerHTML = "<img class=\"photo\" src=\""+createObjectURL(file)+"\"/>"; 
};


JS Ajax请求部分:

说明:第一个监听文件选择更改事件,满足验证条件后则执行预览,第二个事件监听为监听单击btnSelect时弹出窗口的响应,下面的则是确认上传按钮的事件监听,开始发送Ajax请求。此处的createXHR()方法为创建XMLHttpRequest对象,代码我并未贴出,包括addEventListener()方法,这2个部分可以参考其他文章。

代码如下:

//监听图片URL地址更改 
addEventListener($$("uploadFile"), "change", function() { 
checkFile(); 
}); 
//监听单击文件选择按钮 
addEventListener($$("btnSelect"), "click", function() { 
//弹出文件选择框 
$$("uploadFile").click(); 
}); 
//监听确认上传按钮的点击事件 
addEventListener($$("btnConfirm"), "click", function(e) { 
if (checkFile()) { 
try { 
//执行上传操作var xhr = createXHR(); 
$$("maskLayer").style.display = "block"; 
xhr.open("post","/uploadPhoto.action", true); 
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4) { 
var flag = xhr.responseText; 
if (flag == "success") { 
alert("图片上传成功!"); 
} else { 
alert("图片上传成功!"); 
}; 
$$("maskLayer").style.display = "none"; 
}; 
}; 
//表单数据 
var fd = new FormData(); 
fd.append("myPhoto", $$("uploadFile").files[0]); 
//执行发送 
xhr.send(fd); 
} catch (e) { 
console.log(e); 
} 
} 
});

“怎么利用HTML5实现图片文件异步上传”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯