本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法。分享给大家供大家参考,具体如下:
在web开发中,上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮,且不能修改UI。如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传</title> </head> <body> <!-- 要将父布局的position设置为relative,父布局将无法包裹input --> <div style="position: relative;"> <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 --> <!-- 设置opactity为0,使input变透明 --> <!-- 只接受jpg,gif和png格式 --> <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" /> <!-- 自定义按钮效果 --> <div style="text-align: top"> <span style="font-size: 12px;">上传文件:</span> <img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" /> </div> </div> </body> </html>
效果如下:
图片上传
这样,自定义按钮效果就完成了。但是,这样还不能把图片显示出来。要实现显示上传图片功能,可以通过以下方法实现:
<script type="text/javascript"> function showImg(input) { var file = input.files[0]; var reader = new FileReader() // 图片读取成功回调函数 reader.onload = function(e) { document.getElementById('upload').src=e.target.result } reader.readAsDataURL(file) } </script>
function showImg(input) { var file = input.files[0]; var url = window.URL.createObjectURL(file) document.getElemtById('upload').src=url }
使用上述方法中的其中一种,并将showImg方法挂在input的onchange属性上,就能够显示图片了:
<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)"/>
显示效果如下:
显示上传的图片
上述代码中,点击input标签时,一次性只能选择一张图片,如果要选择多张图片,则要给input添加multiple属性:
<input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" multiple onchange="showImg(this)"/>
然后通过多个img显示files里面的图片即可,代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传</title> </head> <body> <!-- 要将父布局的position设置为relative,父布局将无法包裹input --> <div style="position: relative;"> <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 --> <!-- 设置opactity为0,使input变透明 --> <!-- 只接受jpg,gif和png格式 --> <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)" multiple /> <!-- 自定义按钮效果 --> <div style="text-align: top"> <span style="font-size: 12px;">上传文件:</span> <img id="upload" src="./upload.png" style="width: 40px; height: 40px; vertical-align: middle;" /> </div> </div> <div id="imgContainer" style="margin-top: 10px;"></div> </body> <script type="text/javascript"> function showImg(obj) { var files = obj.files // document.getElementById("imgContainer").innerHTML = getImgsByUrl(files) getImgsByFileReader(document.getElementById("imgContainer"), files) } // 使用window.URL.createObjectURL(file)读取file实例并显示图片 function getImgsByUrl(files) { var elements = '' for (var i = 0; i < files.length; i++) { var url = window.URL.createObjectURL(files[i]) elements += "<img src='"+ url + "' style='width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;' />" } return elements } // 使用FileReader读取file实例并显示图片 function getImgsByFileReader(el, files) { for (var i = 0; i < files.length; i++) { let img = document.createElement('img') img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;') el.appendChild(img) var reader = new FileReader() reader.onload = function(e) { img.src = e.target.result } reader.readAsDataURL(files[i]) } } </script> </html>
最终显示效果如图:
多图上传
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
本文向大家介绍js实现图片上传并预览功能,包括了js实现图片上传并预览功能的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src。 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片
本文向大家介绍Django实现前台上传并显示图片功能,包括了Django实现前台上传并显示图片功能的使用技巧和注意事项,需要的朋友参考一下 1. 前台 templates/upload/upload.html 2. 项目设定 settings.py #添加 ALLOW_UPLOAD = ['jpg', 'png', 'jpeg'] 3.app设定 urls.py views.py Django实现
本文向大家介绍Django实现后台上传并显示图片功能,包括了Django实现后台上传并显示图片功能的使用技巧和注意事项,需要的朋友参考一下 1.安装pillow pip install Pillow 2.创建app python manage.py startapp upload 3. project设定 settings.py urls.py 4. app 设定 models.py admin.
本文向大家介绍JS实现图片上传预览功能,包括了JS实现图片上传预览功能的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴js代码了,具体代码如下所示: 以上所述是小编给大家介绍的JS实现图片上传预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!
本文向大家介绍js实现拖拽上传图片功能,包括了js实现拖拽上传图片功能的使用技巧和注意事项,需要的朋友参考一下 直接把本地图片拉到你设定的图片上传成功后的位置,就ok了,具体代码如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍js控件Kindeditor实现图片自动上传功能,包括了js控件Kindeditor实现图片自动上传功能的使用技巧和注意事项,需要的朋友参考一下 Kindeditor是一款功能强大的开源在线HTML编辑器,支持所见即所得的编辑效果。它使用JavaScript编写,可以无缝地与多个不同的语言环境进行集成,如.NET、PHP、ASP、Java等。官方网站可以查看这里:http://kin
本文向大家介绍c#图片上传和显示的实现方法,包括了c#图片上传和显示的实现方法的使用技巧和注意事项,需要的朋友参考一下 由于需要图片上传的功能,所以花了一些时间网上找相关资料终于搞定,效果图如下: 下面的是解决方案截图和上传的图片截图: 具体实现代码如下: 1.界面代码 2.后台代码UploadPic.aspx.cs 3.最后防止上传大文件图片时报错,配置文件添加配置Web.config 以上就是
本文向大家介绍ajax上传图片到PHP并压缩图片显示的方法,包括了ajax上传图片到PHP并压缩图片显示的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了ajax上传图片到PHP并压缩图片显示的具体代码,供大家参考,具体内容如下 需求就是,上传图片并压缩图片页面效果如下图: HTML代码 CSS代码和引入的bootstrap JS代码 PHP代码 图片压缩类请下载源码 以上就是本