js 点击按钮或者图片，实现图片上传以及将图片显示在页面上

点击图片本身，实现图片上传：

1、html页面

<div class="card">//    用于接受上传的图片<img src="img.jpg"  alt="" id="picture">// 用于上传文件<input class="file-upload" type="file" accept="image/*" name="picture"/>
</div>

2、css文件

.file-upload { display: none; // 设置上传文件的input隐藏
}

3、js文件，使用FileReader()获取上传的图片的路径

/*
* 点击图片，上传新图片
* */
$(document).on("click", "#picture", function () {// 点击图片的同时，点击上传文件的input$('.file-upload').click();// 将上传的图片显示到页面上$(document).on("change", ".file-upload", function () {var fileObj = $(".file-upload")[0];var img = document.getElementById('picture'); //获得用户上传的图片节点var reader = new FileReader();// 转换成功后的操作，img.src即为转换后的DataURLreader.onload = function(e) {if (reader.readyState === 2) { //加载完毕后赋值img.src = e.target.result;console.log(img.src);}}reader.readAsDataURL(fileObj.files[0]);});
});

同理：

点击按钮，实现图片上传：

1、html页面,添加一个按钮。

<div class="card">//    用于接受上传的图片<img src="img.jpg"  alt="" id="picture"><button type="button" class="btn btn-primary" id="btn" >上传文件</button>// 用于上传文件<input class="file-upload" type="file" accept="image/*" name="picture"/>
</div>

2、css文件

.file-upload { display: none; // 设置上传文件的input隐藏
}

3、js文件，使用FileReader()获取上传的图片的路径

/*
* 点击按钮，上传新图片
* */
$(document).on("click", "#btn", function () {// 点击图片的同时，点击上传文件的input$('.file-upload').click();// 将上传的图片显示到页面上$(document).on("change", ".file-upload", function () {var fileObj = $(".file-upload")[0];var img = document.getElementById('picture'); //获得用户上传的图片节点var reader = new FileReader();// 转换成功后的操作，img.src即为转换后的DataURLreader.onload = function(e) {if (reader.readyState === 2) { //加载完毕后赋值img.src = e.target.result;console.log(img.src);}}reader.readAsDataURL(fileObj.files[0]);});
});

js 点击按钮或者图片，实现图片上传以及将图片显示在页面上相关推荐

php上传虚假图片,解决PHP上传多个图片并校验的代码问题
以下为引用的内容: // 图片目录 $img_dir = "../upload/"; // -- html 显示上传界面 /* 图片上传处理 */ // 把图片传到服务器 // 初 ...
java图片预览上传_Java实现图片上传预览（使用ajax提交）
html: 图片上传: js: function changepic(){ var reads = new FileReader(); f = document.getElementById('fil ...
模拟QQ相册上传图片（上传指定文件夹下所有的图片）多线程上传（每个图片开辟一个子线程）
上传图片 package com.hp.zuoye01;import java.io.File; import java.io.FileInputStream; import java.io.File ...
uni-app 压缩图片（base64上传）包含图片验证
第一步选择图片 data(){return{imageType: ['image/png', 'image/jpeg', 'image/jpg'],//图片验证类型} }uni.chooseImage ...
图片绑定file上传并获取图片的base64
 <div class="yx-upload-box" style="display:none;"> ...
php 图片上传水印,PHP - 图片上传并添加水印
一个的面向过程的 PHP 图片上传并对其添加文字水印的功能. 还有很多待需完善的地方. index.php $conn=@mysql_connect("localhost",&qu ...
Android 图片批量上传,移动端图片批量上传问题
一.操作系统 1.ios ios的操作系统: 实现图片批量上传,可以直接使用input type=file 加上multiple 就可以实现,至于有些图片显示有问题可以通过 new FileRead ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
图片和文件上传js剖析
/** * 商户资质信息模块js * * 涉及页面组件 { * 上传组件(UploadFileComponent) * } * * * 初始化工具(init) * * @Author:Waver */ ...
js插件+UploadFile类实现图片的批量上传
文件上传无疑是web应用中一个非常常用的功能,下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传. 首先,给大家介绍展示一下具体操作页面: h ...

js 点击按钮或者图片，实现图片上传以及将图片显示在页面上

js 点击按钮或者图片，实现图片上传以及将图片显示在页面上相关推荐

最新文章

热门文章