js实现上传图片并显示图片名称
来源:本站原创|时间:2020-01-10|栏目:JavaScript|点击: 次
本文实例为大家分享了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上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章
- 04-02java后端代码分页 java后端实现分页page
- 01-10Echarts实现单条折线可拖拽效果
- 01-10在Vue项目中使用Typescript的实现
- 01-10Vue中使用Lodop插件实现打印功能的简单方法
- 01-10echarts实现折线图的拖拽效果
- 01-10d3.js实现图形缩放平移
- 01-10小程序简单两栏瀑布流效果的实现
- 01-10微信小程序批量上传图片到七牛(推荐)
- 01-10H5实现手机拍照和选择上传功能
- 01-10Echarts实现多条折线可拖拽效果
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 01-10delphi制作wav文件的方法
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 01-10C#中split用法实例总结
- 04-02jquery与jsp,用jquery
- 01-11ajax实现页面的局部加载
- 01-10SublimeText编译C开发环境设置