js实现图片上传并预览功能

本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下

思路:

完成这个功能,首先需要美化上传图片的按钮,然后添加一个标签,在图片上传之后,用新图片的src替换原来标签中的src。

如下图所示,是原始的按钮样式:

美化步骤:

(1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合。

(2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮,div等标签大小一致。

(3)我将此标签设置为透明:opacity:0;

如下图所示,是两种美化后的上传图片按钮:

接下来是完成图片预览的功能,步骤:

(1)首先需要定义好一个,src为空或者是图片

(2)如果src为空,就给定义好的img设置为透明:opacity:0;如果不是透明的话,会显示一个图片的标志,不美观。

(3)点击上传图片后,获取上传图片的src,将它赋值给事先定义好的,再给设置opacity:1;

接下来为具体的代码示例。

示例一:将图片上传到点击的位置。(此示例中使用了AUI框架,但不影响此功能。)

HTML代码

rush:xhtml;">
上传

CSS代码

rush:css;"> #imgPreview { width: 40%; height: 180px; margin: 10px auto 0px auto; border: 1px solid black; text-align: center; } #prompt3 { width: 100%; height: 180px; text-align: center; position: relative; } #imgSpan { position: absolute; top: 60px; left: 40px; } .filepath { width: 100%; height: 100%; opacity: 0; } #img3 { height: 100%; width: 100%; display: none; }

JS代码

rush:js;"> function changepic() { $("#prompt3").css("display","none"); var reads = new FileReader(); f = document.getElementById('file').files[0]; reads.readAsDataURL(f); reads.onload = function(e) { document.getElementById('img3').src = this.result; $("#img3").css("display","block"); }; }

效果如下图所示:

示例二:将图片上传到点击按钮旁边的位置。(此示例中使用了阿里巴巴矢量图标库,但不影响此功能。)

HTML代码

rush:xhtml;">

CSS代码

rush:css;"> #img { float: left; margin-left: 20px; width: 150px; height: 60px; } #upImg { position: absolute; top: 0px; left: 0px; } #upImg input { width: 70px; height: 60px; opacity: 0; } #imgPreview { width: 80px; height: 60px; position: absolute; left: 70px; top: 0px; } #cropedBigImg{ width: 100%; height: 100%; display: none; }

JS代码

rush:js;"> $('#chooseImage').on('change',function() {//当chooseImage的值改变时,执行此函数 var filePath = $(this).val(),//获取到input的value,里面是文件的路径 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

// 检查是否是图片
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
error_prompt_alert('上传错误,文件格式必须为:png/jpg/jpeg');
return;
}else{
$('#cropedBigImg').css('display','block');
$('#cropedBigImg').attr('src',src);
}
});

效果如下图所示:

本人为JS实习生一枚,不断学习,不断进步,欢迎各位前辈批评指教。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...