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://scjbc.cn/article/djcpdg.html