本文分享js上传预览图片的具体代码，供大家参考。具体内容如下

想法：要完成这个功能，我们首先需要美化上传图片的按钮，然后添加一个img/tag。图片上传后，用新图片的src替换原始img/标签中的src。

如下图所示，是原来的按钮样式：

美化步骤：

(1)使用绝对定位上传图片标签，使其位于图片、按钮、div等标签上。或者为图片、按钮或div设置绝对定位。简而言之，上传文件的按钮应该与用户指定的按钮一致。

(2)为上传的图片标签设置大尺寸，使其与重叠图片、按钮、div等的标签尺寸相同。

(3)我把这个标签设置为透明：不透明度：0；

如下图所示，有两个美化的上传图片按钮：

下一步是完成图片预览功能，步骤：

(1)首先，您需要定义一个img，其src为空或默认图片。

(2)如果src为空，则将定义的img设置为透明：不透明度：0；如果不透明，会显示图片标志，不美观。

(3)点击上传图片后，获取上传图片的src，分配给预定义的img，然后设置不透明度：img为1；

下面是一个具体的代码示例。

示例1:将图片上传到点击的位置。(本例中使用了AUI框架，但该功能不受影响。)

HTML代码：

Div id=' img预览' div id=' prompt3' span id=' img span '单击以上传br/I class=' aui-icon font aui-icon-plus '/I！-icon in - AUI框架-/span输入类型=' file ' id=' file ' class=' file path ' onchange=' change pic(this)' accept=' image/jpg，image/JPEG，image/png，image/png '！-当vaule值发生变化时执行changepic函数，规定上传的文件只能是pictures-/div img src=' http : # ' id=' img 3 '/div CSS code:

# IMgpreview { width : 40%；高度： 180 px；margin: 10px auto 0px autoborder: 1px纯黑；文本对齐：中心；} # prompt 3 { width : 100%；高度： 180 px；文本对齐：中心；相对位置：} # IMgspan { position : absolute；top: 60pxleft: 40px}.file path { width : 100%；高度： 100%；opa city 3360 0；} # img 3 { height : 100%；宽度： 100%；display:无；}JS代码：

function change pic(){ $(' # prompt 3 ')。css('display '，' none ')；var reads=new FileReader()；f=document . getelementbyid(' file ')。文件[0]；reads . readasdataurl(f)；reads . onload=function(e){ document . getelementbyid(' img 3 ')。src=this.result$('#img3 ')。css('display '，' block ')；};}效果如下图所示：

示例2:将图片上传到点击按钮旁边的位置。(本例使用阿里巴巴矢量图标库，但该功能不受影响。)

HTML代码：

div class=' aui-col-xs-3 ' id=' img ' SVG class=' icon big icon ' aria-hidden=' true ' use xlink : href=' # icon-msnui-add '/use/SVG！-阿里巴巴矢量图标，它是最终渲染中的“”图标-div class=' aui-grid-label '添加图片/div div id=' upimg '输入类型=' file ' name=' file ' id=' choose image '/div div id=' img preview ' img src=' http : # ' id

# img { float: left左边距left: 20px宽度： 150 px；高度： 60px；} # upImg { position: absolutetop: 0pxleft: 0px}#upImg输入{ width: 70px高度： 60px；opa city 3360 0；} # imgPreview { width: 80px高度： 60px；绝对位置：left: 70pxtop: 0px} # cropedBigImg { width : 100%；高度： 100%；display:无；}JS代码：

$ ('# chooseImage ')。on ('change '，function(){//当chooseimage的值改变时，执行此函数var filePath=$(this)。val()，//获取输入的值。存在文件路径file format=file path . substring(file path . last indexoff(' . '))).tolower case()，src=window . URL . createobjecturl(this . files[0])；//转换成可以本地预览的格式//如果(！文件格式。匹配(/)。png |。jpg |。JPEG/)) {error _ prompt _ alert('上传错误，文件格式必须为：png/jpg/JPEG ')；返回；}else{ $('#cropedBigImg ')。css('display '，' block ')；$('#cropedBigImg ')。attr('src '，src)；} });效果如下图所示：

我是JS实习生。我不断学习，不断进步。欢迎各位前辈批评指点。

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