js实现上传图片并显示图片名称

时间：2021-05-26

本文实例为大家分享了js上传图片并显示图片名称的具体代码，供大家参考，具体内容如下

今天整理了一下上传图，用jquery的还是方便点，小女子整理的是原生的js！！！

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> img{max-width: 100%; height: 100px;margin: 10px 20px;} .img_list .img-div{width: 100px;height: 200px; float: left; overflow: hidden;text-align: center; } .upload{position: relative;} .upload input{opacity: 0;position: absolute;top: 0;left: 10px;height: 100px;width: 100px;} .upload .upload_box{width: 100px;height: 100px;background-color: pink;color: white;} .img-div p{color: #28a4b0;margin: 0;} </style></head><body><div class="upload"> <input class="file_input" type="file" multiple id="avc"/> <div class="upload_box"> 点我上传图片哦 </div> </div> <div class="img_list"> </div><script> var file_input=document.getElementsByClassName("file_input")[0];// 触发事件用的是change，因为files是数组，需要添加下标 file_input.addEventListener("change",function(){ var obj=this; var obj_name=this.files[0].name; var img_length=obj.files.length; for(var i=0;i<img_length;i++) { if(!(/image\/\w+/).test(obj.files[i].type)) { alert("上传的图片格式错误，请上传图片"); return false; } var reader = new FileReader(); reader.error=function(e){ alert("读取异常") } reader.onload = function(e){// div_html是包括图片和图片名称的容器 var img_html='<img src="'+e.target.result+'"/>'; var div_html=document.createElement("div"); var p_html=document.createElement("p"); if(document.getElementsByClassName("img_list")[0].children.length<5) { div_html.innerHTML=img_html; div_html.appendChild(p_html); p_html.innerHTML=obj_name; div_html.className="img-div"; document.getElementsByClassName("img_list")[0].appendChild(div_html); }else{ alert("最多上传5张图片") } }; reader.οnlοadstart=function(){ console.log("开始读取"+obj_name); } reader.οnprοgress=function(e){ if(e.lengthComputable){ console.log("正在读取文件") } }; reader.readAsDataURL(obj.files[i]); } })</script></body></html>

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章