js实现上传图片前预览效果

Myth丶恋晨 2024-04-18 20:09 131阅读 0赞

![20190911145342907.png][]

$(function() \{  
    $("\#file").change(function() \{  
        var formData = new FormData();  
        console.log($(this)\[0\].files)

formData.append("multiFile", $(this)\[0\].files\[0\]) //这句是为了后续把文件上传到后台

var reader = new FileReader();//创建文件读写  
        reader.readAsDataURL($(this)\[0\].files\[0\])

reader.onload = function() \{  
            $("\#img").attr("src", reader.result);  
        \}  
       
    \})  
\})

具体效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NheWdvb2Q5OTk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NheWdvb2Q5OTk_size_16_color_FFFFFF_t_70 1][]

[20190911145342907.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d2865beef36e4426aaca59907b4c3b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NheWdvb2Q5OTk_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/048ed561dc3b4b28ad12a88458a5a083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NheWdvb2Q5OTk_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c1d1ca830b214e6db6e2d01df5f7b1d7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现上传图片前预览效果

![20190911145342907.png][] $(function() \{ $("\file").change(function() \{ ...

Myth丶恋晨/ 2024年04月18日 20:09/ 0 赞/ 132 阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 46 阅读

相关 vue实现上传图片并预览效果 html+css+js

一.话不多，先看效果： ![在这里插入图片描述][20210623205125578.gif_pic_center] 大家好，(๑╹◡╹)ﾉ” 这是我在逛b站时看

╰+哭是因爲堅強的太久メ/ 2022年10月09日 04:47/ 0 赞/ 505 阅读

相关 JavaScript上传图片前预览

纯JavaScript上传图片前预览 <table width="100%" border="0" cellspacing="0" cellpadding="0">

女爷i/ 2022年08月21日 05:59/ 0 赞/ 365 阅读

相关上传图片预览JS脚本 Input file图片预览的实现示例

需要一个用户上传头像预览的功能，因此写了一段上传图片预览JS脚本,Input file图片预览的实现，需要的朋友可以看看好东西要分享！在深圳做项目的时候，需要

快来打我*/ 2022年07月27日 12:00/ 0 赞/ 347 阅读

相关 js实现上传图片事实预览

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this

分手后的思念是犯贱/ 2022年07月12日 23:08/ 0 赞/ 416 阅读

相关 js实现上传图片预览的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月16日 07:11/ 0 赞/ 340 阅读

相关 jQuery实现上传图片时，显示图片预览效果

代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2022年05月24日 12:27/ 0 赞/ 390 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 494 阅读

相关 js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 ![复制代码][copycode.gif] <!DOCTYPE html>

我不是女神ヾ/ 2022年05月06日 20:28/ 0 赞/ 462 阅读