JQuery 获取本地图片的方法

深藏阁楼爱情的钟 2023-06-13 04:37 3阅读 0赞

获取本地图片可以使用FileReader对象中的readAsDataURL方法

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>JQuery 获取本地图片的方法</title>
    	<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    </head>
    <body>
    	<input class="input-file" type="file">
        <div>
            <img src="" class="photo"/>
        </div>
    <script>
        $(function(){
            $(".input-file").change(function(e) {
            	//得到事件的目标节点，既input元素
                var imgBox = e.target;
                getImg(imgBox);
                $(".input-file").change = null;
            });
            function getImg(tag) {
                var file = tag.files[0];
                var reader = new FileReader();
                //将文件以Data URL形式读入页面
                reader.readAsDataURL(file);
                reader.onload = function() {
              		//result结果为 DataURL
                   	var imgSrc = this.result;
                   	//将图片显示出来
                    $(".photo").attr("src", imgSrc);
                }
            }
        })
    </script>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery实现获取本地图片并展示

一.html页面保留按钮和隐藏的img标签 <div> 选择图片: <input type="file" id="file" name="file

客官°小女子只卖身不卖艺/ 2023年06月19日 02:30/ 0 赞/ 46 阅读

相关 JQuery 获取本地图片的方法

获取本地图片可以使用FileReader对象中的readAsDataURL方法 <!DOCTYPE html> <html lang="en"> <h

深藏阁楼爱情的钟/ 2023年06月13日 04:37/ 0 赞/ 4 阅读

相关 Java 获取图片的大小和尺寸（本地、网络图片）

话不多说，直接甩代码 Juint 进行的单元测试，有需要可以自己封装一下方法我懒省事直接抛出Exception @Test public void

﹏ヽ暗。殇╰゛Y/ 2023年05月31日 06:46/ 0 赞/ 65 阅读

相关 php获取图片信息的方法

现在有两种情况。一：普通可以访问的图片，获取图片信息直接使用getimagesize($url)即可。如： $remote\_png\_url = 'htt

超、凢脫俗/ 2022年12月27日 12:51/ 0 赞/ 241 阅读

相关 uni-app接口获取的图片转化为本地图片

// 网路图片转化为本地图片的方法。。。。。 getNetworkImage(url) \{ return new Promise((re

骑猪看日落/ 2022年09月10日 08:12/ 0 赞/ 148 阅读

相关 JS获取本地文件绝对路径-预览本地图片

通过file input框显示本地文件的绝对路径，在网上找了很久，一直只有IE和Firefox的实现，没有谷歌。这里有个解决方案，可以显示本地图片，但是读不到绝对

素颜马尾好姑娘i/ 2022年08月10日 16:52/ 0 赞/ 401 阅读

相关 js 获取本地IP方法

我们可以通过运行cmd ipconfig操作,本实例在IE下支持,其他浏览器不支持滴,版本高点的IE还需要运行权限才行 var fso = new ActiveXObje

川长思鸟来/ 2022年08月10日 09:48/ 0 赞/ 283 阅读

相关【JavaScript & jQuery】获取图片、文件地址的几种方法

备忘，整理一下： ![在这里插入图片描述][20190428142233854.png] chrome、IE、火狐测试过有效； <!DOCTYPE html>

秒速五厘米/ 2022年01月12日 11:15/ 0 赞/ 604 阅读

相关 iOS 根据图片URL从本地相册获取图片

最近做一个聊天的项目，需要发送图片后读取本地图片显示到列表里。刚开始的时候，天真的认为可以用SDWebImage直接加载，然后并不能行。于是在网上搜了搜，如何根据从相册获取

电玩女神/ 2022年01月05日 16:19/ 0 赞/ 501 阅读

相关 jquery获取图片真实宽高

<img id="image" src="../img/1.jpg" /> $(function() { var imgSrc = $("image

太过爱你忘了你带给我的痛/ 2021年12月05日 02:05/ 0 赞/ 369 阅读