前言

h5实训时实现的一个图片上传即时显示的效果，如下图所示

正文

超文本标记语言代码

表单操作=' '方法=' POST '角色='form' div class='form-group '标签为='头香'头像上传：/标签输入类型=' file ' id=' HeAdPhoto ' name=' HeAdPhoto '/div img id=' imag ' src=' http : img/up。png ' alt=' style=' height :5 rem；宽度： 5雷姆；/div /div /formjs脚本代码

脚本/*显示上传的图片*/函数getObjectURL(文件){ var URL=null if(window . createobjecturl！=未定义){ URL=窗口。createobjecturl(文件);} else if(窗口。网址！=未定义){ url=window .URL.createObjectURL(文件);} else if (window.webkitURL！=未定义){ URL=窗口。webkiturl。createobjecturl(文件);}返回url} $('#headPhoto ').change(function(){ var eImg=$(' # imag ')；eImg.attr('src '，getObjectURL($(this)[0]).文件[0]);$(这个)。后(EImg)；});/scriptwindow .URL.createObjectURL方法创建一个新的对象网址，该对象统一资源定位器可以代表某一个指定的文件对象或一滴对象。

语法：

objectURL=窗口网址。CreateObjectURl(blob)；一滴参数是一个文件对象或者一滴对象对象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脚本src=' http :https://cdn。bootcss。com/jquery/3。3 .1/jquery。js '/脚本链接href=https://cdn。bootcss。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS rel='样式表脚本src=' http 3360https://max cdn。bootstrapcdn。com/bootstrap/3。3 .7/js/bootstrap最小.头像上传：/标签输入类型=' file ' id=' HeAdPhoto ' name=' HeAdPhoto '/div img id=' imag ' src=' http : img/up。png ' alt=' style=' height :5 rem；宽度： 5雷姆；/div /div /form/bodyscript /*显示上传的图片*/函数getObjectURL(文件){ var URL=null if(window . createobjecturl！=未定义){ URL=窗口。createobjecturl(文件);} else if(窗口。网址！=未定义){ url=window .URL.createObjectURL(文件);} else if (window.webkitURL！=未定义){ URL=窗口。webkiturl。createobjecturl(文件);}返回url} $('#headPhoto ').change(function(){ var eImg=$(' # imag ')；eImg.attr('src '，getObjectURL($(this)[0]).文件[0]);$(这个)。后(EImg)；});/script/html参考：链接

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