<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测测测</title>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    <!--实例一-->
    <div style="width:200px; height:210px; border:1px solid red;" id="show">
        <div class="mark"></div>
    </div>
    <br>
    <input type="file" value="上传文件" onchange="getImgURL(this)">

    <!--实例二-->
    <input id="input-file" class="upload" type="file" value="">
    <img src="" alt=""/>
    <!--实例三-->
    <style>
    .img{opacity:0;}
    .imgs{border:1px solid #78C3F3;background: #AADFFD;color: #1E88C7;border-radius: 4px;text-align:center;cursor: pointer;
        padding:10px;}
    </style>
    <ul class="iconlist">
    <li>
        <div class="imgs" onclick="document.getElementById('img_1').click()">选择图片</div>
        <input type="file" class="img" name="img[]" id="img_1" accept="image/*" onchange="l(this)"/>
    </li>
    </ul>

    <ul class="iconlist">
    <li><div width="225px"><img src="" width="225px" id="1"/></div></li>
    </ul>
</body>

<script>
    //实例一JS
    var imgurl = "";

    function getImgURL(node) {
        var imgURL = "";
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);
            }
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
            try{
                //Firefox7.0
                imgURL =  file.getAsDataURL();
                //alert("//Firefox7.0"+imgRUL);
            }catch(e){
                //Firefox8.0以上
                imgRUL = window.URL.createObjectURL(file);
                //alert("//Firefox8.0以上"+imgRUL);
            }
        }catch(e){      //这里不知道怎么处理了，如果是遨游的话会报这个异常
            //支持html5的浏览器,比如高版本的firefox、chrome、ie10
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }
        //imgurl = imgURL;
        creatImg(imgRUL);
        return imgURL;
    }

    function creatImg(imgRUL){   //根据指定URL创建一个Img对象
        var textHtml = "<img src='"+imgRUL+"'/>";
        $(".mark").html(textHtml);
    }

   //实例二JS
$(function(){
    $('.upload').change(function(){
        var oFReader = new FileReader();
        var file = document.getElementById('input-file').files[0];
        oFReader.readAsDataURL(file);
        oFReader.onloadend = function(oFRevent){
            var src = oFRevent.target.result;
            $('img').attr('src',src);
        }
    })
})


//实例三JS
<script>
    function l(evn){
        var name = event.target.files[0].name;//获取上传的文件名
        var divObj= $(evn).prev()  //获取div的DOM对象
        $(divObj).html(name) //插入文件名
        var id = $(evn).attr('id');//获取id
        var num = id.substr(4,1)
        var file = event.target.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                console.log("路径地址:"+e.target.result)
                $("#"+num).attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };
        }
    }
</script>
</script>
</html>

原生js上传图片的更多相关文章

  1. 原生 js 上传图片

    js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  2. 原生js上传图片遇到的坑（axios封装）

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

  3. 原生js上传图片时的预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  5. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  6. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  7. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  8. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  9. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

随机推荐

  1. GIT+Gitolite+Gerrit 环境搭建 ***

    系统环境:Ubuntu12.04 服务器上安装git+gitolite+gitweb root@server: 为搭建git服务器终端,假设ID为 192.168.199.117 或域名为: http ...

  2. Markdown——让你专注写作

    Markdown--让你专注写作 前些日子,写作的时候总会因为排版而耽误时间,甚至因为排版而把写作的专注力转移到了貌似相关的排版上.诚然,一个好的排版,会让读者有良好的体验,可是对于写作的人来说,这却 ...

  3. UVa 11806 Cheerleaders (数论容斥原理)

    题意:给定一个n*m的棋盘,要放k个石子,要求第一行,最后一行,第一列,最后一列都有石子,问有多少种放法. 析:容斥原理,集合A是第一行没有石子,集合B是最后一行没有石子,集合C是第一列没有石子,集合 ...

  4. 网易云MongoDB分片集群（Sharding）服务已上线

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. MongoDB sharding cluster(分片集群)是MongoDB提供的数据在线水平扩展方案,包括 ...

  5. ES的简单增删改查

    1.查看全部索引 GET:192.168.100.102:9200/_cat/indices 2.创建名为news的索引 PUT:192.168.100.102:9200/news 3.新增docum ...

  6. 通过IDEA制作包含Java应程序的Docker镜像

    IDEA官网在IDEA中把Java App制作成Docker镜像并启动一个容器运行 在idea上使用docker作为java的开发环境[][] ubuntu+docker+docker-compose ...

  7. 基于CentOS6.5或Ubuntu14.04下Suricata里搭配安装 ELK (elasticsearch, logstash, kibana)（图文详解）

    前期博客 基于CentOS6.5下Suricata(一款高性能的网络IDS.IPS和网络安全监控引擎)的搭建(图文详解)(博主推荐) 基于Ubuntu14.04下Suricata(一款高性能的网络ID ...

  8. JS 事件添加onclick写法注意。

    自定义函数添加onclick事件写法注意. 错误写法:element.onclick = addclass(className); 正确写法:element.onclick = function(){ ...

  9. AJPFX关于构造器的总结

    构造器        构造器定义        构造器作用        构造器特点        构造器修饰符        默认构造器        构造器重载        构造器和一般函数的区 ...

  10. Android Studio 导入新工程项目

    1 导入之前先修改工程下相关文件 1.1 只需修改如下三个地方1.2 修改build.gradle文件 1.3 修改gradle/wrapper/gradle-wrapper.properties 1 ...