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

最新推荐文章于 2021-06-19 17:40:38 发布

freedom_文

最新推荐文章于 2021-06-19 17:40:38 发布

阅读量2.5k

点赞数 2

分类专栏： javascript jquery form

本文链接：https://blog.csdn.net/freedomVenly/article/details/93210434

版权

javascript 同时被 3 个专栏收录

49 篇文章 1 订阅

订阅专栏

jquery

9 篇文章 1 订阅

订阅专栏

form

8 篇文章 0 订阅

订阅专栏

备忘，整理一下：
在这里插入图片描述

chrome、IE、火狐测试过有效；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<label>
    <input id="in1" type="file" accept="image/jpg,image/jpeg,image/png,image/bmp">
</label>

<div class="preview_wrap"></div>


<img src="" alt=""  id="img1">


<script src="../jQuery-3.3.1.min.js"></script>
<script>

    //1、 createObjectURL
    $("input").change(function(){

        var fileS = this.files;

        if(!fileS.length) {
            return;
        }

        $("img").attr("src", window.URL.createObjectURL(fileS[0]));

    });

    //2、 上面的 js 原生版
    // document.getElementById('in1').onchange=function () {
    //     // console.log(this.files[0]);
    //     var fileS=this.files;
    //     if(!fileS.length) {
    //         return;
    //     }
    //
    //     document.getElementById('img1').setAttribute("src",window.URL.createObjectURL(fileS[0]));
    //
    // }


    //3、   URL.createObjectURL 方式
    // document.getElementById('in1').onchange = function(){
    //     var ele =  this.files[0];
    //
    //     var createObjectURL = function(blob){
    //         return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    //     };
    //     var newimgdata = createObjectURL(ele);
    //
    //     console.log(newimgdata);
    //
    //     var pvImg = new Image();
    //     pvImg.src = newimgdata;
    //     pvImg.setAttribute('id','previewImg');
    //
    //     $('.preview_wrap').html('').append(pvImg);
    // }



    //4、  filereader方式
    // document.getElementById('in1').onchange = function(){
    //
    //     var ele =  this.files[0];
    //
    //     var fr = new FileReader();
    //     fr.onload = function(ele){
    //
    //         var pvImg = new Image();
    //         pvImg.src = ele.target.result;
    //         pvImg.setAttribute('id','previewImg');
    //
    //         $('.preview_wrap').html('').append(pvImg);
    //     }
    //     fr.readAsDataURL(ele);
    // }



</script>
</body>
</html>

freedom_文

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript & jQuery】获取图片、文件地址的几种方法

备忘，整理一下：chrome、IE、火狐测试过有效；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><label>...
复制链接

扫一扫