<!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. 洛谷 P1966 火柴排队

    题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为:∑(ai​−bi​)2 其中ai​ 表示 ...

  2. nginx https反向代理tomcat

    Context体现在server.xml中的Host里的<Context>元素,它由Context接口定义.每个<Context>元素代表了运行在虚拟主机上的单个Web应用. ...

  3. Android Dialogs(5)[正常显示dlg,将Fragment显示为dialog,将Aty显示为dlg,嵌入],关闭Dialog

    Showing a Dialog When you want to show your dialog, create an instance of your DialogFragment and ca ...

  4. jacaScript数组

    1.var arr=['1','2','3'] typeof arr (判断数组类型)    print(arr)打印数组内容 2.arr[100]='x',  数组中间自动添加,alert(arr. ...

  5. String的用法——其他功能

    package cn.itcast_06; /* String类的其他功能: 替换功能: String replace(char old,char new) String replace(String ...

  6. jstat命令-帮助优化java性能

    jstat命令使用 jstat命令可以查看堆内存各部分的使用量,以及加载类的数量.命令的格式如下: jstat [-命令选项] [vmid] [间隔时间/毫秒] [查询次数]

  7. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  8. nvm安装nodejs

    1. 安装nvm 下载 nvm-windows解压缩 nvm-windows解压缩 nvm-setup双击运行 nvm-setup.exe选择next选择 [D:\dev][path1] 或 默认路径 ...

  9. IntelliJ IDEA安装与破解

    1.软件下载 文中使用到的安装包下载 2.部署 安装一路下一步即可. 把下载的JetbrainsCrack-3.1-release-enc.jar放在安装目录的bin目录下 3.修改配置文件 在安装的 ...

  10. Redis缓存Object，List对象

    一.到目前为止(jedis-2.2.0.jar),在Jedis中其实并没有提供这样的API对对象,或者是List对象的直接缓存,即并没有如下类似的API jedis.set(String key, O ...