js分分钟搞定图片回显问题

简介: js分分钟搞定图片回显问题

引言

 

在项目中遇到了上传图片的需求,图片上传回显是一套的东西,所以我们需要回显功能,下面提供一种js的实现方式:

 

js代码如下:

function changImg(e,name) {
    for (var i = 0; i < e.target.files.length; i++) {
        var file = e.target.files.item(i);
        if (!(/^image\/.*$/i.test(file.type))) {
            continue; //不是图片 就跳出这一次循环
        }
        //实例化FileReader API
        var freader = new FileReader();
        freader.readAsDataURL(file);
        freader.onload = function (e) {
            console.log(e.target.result);
            $("#"+ name).attr("src", e.target.result);
        }
    }
}

Html代码如下:


<li><span><img id="image1" src="../images/sc.jpg"></span><input  οnchange="changImg(event,'imag


这样就实现照片上传回显问题,在这和大家共勉!

 

这次图片上传采用的是阿里的oss,在后面的博客中和大家分享关于oss的东西。

目录
相关文章
|
2月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
56 0
|
3月前
|
移动开发 JavaScript 定位技术
分享118个JS图片代码,总有一款适合您
分享118个JS图片代码,总有一款适合您
22 0
|
3月前
|
移动开发 JavaScript 前端开发
分享126个JS图片代码,总有一款适合您
分享126个JS图片代码,总有一款适合您
31 0
|
3月前
|
移动开发 JavaScript HTML5
分享106个JS图片代码,总有一款适合您
分享106个JS图片代码,总有一款适合您
18 0
|
3月前
|
移动开发 JSON JavaScript
分享188个JS图片效果JS代码,总有一款适合你
分享188个JS图片效果JS代码,总有一款适合你
35 1
|
3月前
|
JavaScript
js实现图片3D轮播效果(收藏)
js实现图片3D轮播效果(收藏)
25 0
|
1月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
12 0
|
4月前
|
JavaScript 前端开发
将base64格式的图片画到canvas上(js和vue两种)
将base64格式的图片画到canvas上(js和vue两种)
117 1
|
1月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
24 0
|
1月前
|
Web App开发 前端开发 iOS开发
编程笔记 html5&css&js 008 HTML图片
编程笔记 html5&css&js 008 HTML图片