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代码：
点击上传
当前文章：js实现图片上传并预览功能-创新互联
转载注明：http://mswzjz.cn/article/djcpdg.html