<!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. Linux 性能工具集

    系统级别: 下面这些工具利用内核的计数器在系统软硬件的环境中检查系统级别的活动. vmstat: 虚拟内存和物理内存的统计,系统级别. mpstat: 每个CPU 的 使用情况. iostat: 每个 ...

  2. win7上安装macaca的报错问题

    macaca网上的各种教程中,都建议使用淘宝源安装macaca,使用淘宝源就需要先安装cnpm,在win7上切换到淘宝源安装cnpm后(npm install -g cnpm --registry=h ...

  3. 【141】Adobe Acrobat技巧

    目录: 去除PDF的水印 待定 待定 待定 待定 待定 待定 待定 1. 批量去除PDF文件的水印 用Adobe Acrobat打开PDF文件之后,右侧选择工具>页面>水印>删除,可 ...

  4. MYSQL自动备份策略的选择(转载)

    原文地址: http://shinepaopao.iteye.com/blog/1938568

  5. bzoj 1606: [Usaco2008 Dec]Hay For Sale 购买干草【01背包】

    在洛谷上被卡常了一个点! 就是裸的01背包咯 为啥我在刷水题啊 #include<iostream> #include<cstdio> #include<algorith ...

  6. bzoj 2288: 【POJ Challenge】生日礼物【链表+堆】

    参考:http://blog.csdn.net/w_yqts/article/details/76037315 把相同符号的连续数字加起来,合并后ans先贪心的加上所有正数,如果正数个数sum> ...

  7. [POI2008]BLO-Blockade 【无向图tarjan/鸽点】By cellur925

    题目传送门 lyd无向图tarjan的例题. 一句话题意(不得不佩服lyd老师的高度概括能力):在一张无向连通图上,求出每个点被破坏(去掉与这个点相关的所有边,不去掉这个点)后,无向图中使i,j不连通 ...

  8. Springboot整合elasticsearch以及接口开发

    Springboot整合elasticsearch以及接口开发 搭建elasticsearch集群 搭建过程略(我这里用的是elasticsearch5.5.2版本) 写入测试数据 新建索引book( ...

  9. （转载）Python一篇学会多线程

    Python 一篇学会多线程 链接:https://www.cnblogs.com/yeayee/p/4952022.html  多线程和多进程是什么自行google补脑,廖雪峰官网也有,但是不够简洁 ...

  10. poj 3159 Candies dijkstra + queue

    题目链接: http://poj.org/searchproblem 题目大意: 飞天鼠是班长,一天班主任买了一大包糖果,要飞天鼠分发给大家,班里面有n个人,但是学生A认为学生B比自己多的糖果数目不应 ...