时间:2021-05-26
前言
h5实训时实现的一个图片上传即时显示的效果,如下图所示
正文
Html代码
<form action="" method="POST" role="form"> <div class="form-group"> <label for="touxiang" >头像上传:</label> <input type="file" id="headPhoto" name="headPhoto" /> <div ><img id="imag" src="img/up.png" alt="" style="height:5rem;width: 5rem;"></div> </div> </form>js脚本代码
<script> function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { url = window.webkitURL.createObjectURL(file) ; } return url ; } $('#headPhoto').change(function() { var eImg=$('#imag'); eImg.attr('src', getObjectURL($(this)[0].files[0])); $(this).after(eImg); });</script>window.URL.createObjectURL方法
创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.
语法:
objectURL = window.URL.createObjectURL(blob);
blob参数是一个File对象或者Blob对象.
objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.
完整代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片上传</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <link href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body> <form action="" method="POST" role="form"> <div class="form-group"> <label for="touxiang" >头像上传:</label> <input type="file" id="headPhoto" name="headPhoto" /> <div ><img id="imag" src="img/up.png" alt="" style="height:5rem;width: 5rem;"></div> </div> </form></body><script> function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { url = window.webkitURL.createObjectURL(file) ; } return url ; } $('#headPhoto').change(function() { var eImg=$('#imag'); eImg.attr('src', getObjectURL($(this)[0].files[0])); $(this).after(eImg); }); </script></html>参考:链接
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS上传图片前实现图片预览效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS上传图片前的图片预览效果vardFile=do
本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下效果展示:源码展示:js实现点击上传图片,同时设该图片为模糊背景inp
图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面
本文为大家分享了SpringBoot实现图片上传与显示的具体代码,供大家参考,具体内容如下SpringBoot实现图片上传与显示:Demo地址效果图预览思路一般
本文实例讲述了PHP实现上传多图即时显示与即时删除的方法。分享给大家供大家参考,具体如下:就像这样的,每选择一个图片就会即时显示出来,附加到右边,也可以随意删除