<!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. NPU 2015年陕西省程序设计竞赛网络预赛（正式赛）F题 和谐的比赛（递推 ||卡特兰数（转化成01字符串））

    Description 今天西工大举办了一场比赛总共有m+n人,但是有m人比较懒没带电脑,另外的n个人带了电脑.不幸的是,今天机房的电脑全坏了只能用带的电脑,一台电脑最多两人公用,确保n>=m. ...

  2. 80个Python经典资料（教程+源码+工具）汇总——下载目录 ...

    原文转自:http://bbs.51cto.com/thread-935214-1.html 大家好,51CTO下载中心根据资料的热度和好评度收集了80个Python资料,分享给Python开发的同学 ...

  3. linux下解压tgz文件(转载)

    转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压:    tar zxvf myfile.tgz

  4. java中jsp页面的css资源定位---备忘录

    1:同级目录下(应该是相对定位) web-inf下的内容是不对外开放的/安全的,不能通过url直接访问.已避免非法人员通过url自己操作一些比较私密的文件信息. 能在sevlet(或者spring的c ...

  5. springboot整合elasticsearch出错：java.lang.NoClassDefFoundError: org/elasticsearch/plugins/NetworkPlugin

    Caused by: java.lang.NoClassDefFoundError: org/elasticsearch/plugins/NetworkPlugin at java.lang.Clas ...

  6. Python上下文管理器(Context managers)

    上下文管理器(Context managers) 上下文管理器允许你在有需要的时候,精确地分配和释放资源. 使用上下文管理器最广泛的案例就是with语句了.想象下你有两个需要结对执行的相关操作,然后还 ...

  7. mysql快捷命令

    # mysql快捷命令alias mysqlstart='sudo /usr/local/mysql/support-files/mysql.server start'alias mysqlstop= ...

  8. 51nod1127 最短的包含字符串 尺取法

    Bryce1010模板 #include <bits/stdc++.h> using namespace std; typedef long long LL; map<char,LL ...

  9. 贪心+枚举/哈希表 HDOJ Trouble

    题目传送门 题意:5个集合,每个集合最多200个数字,问是否每个集合挑一个数加起来和为0. 分析:显然n^5的程序果断超时,甚至n^3logn的二分也过不了.想n^3的方法,既然判断有没有,那么可以将 ...

  10. [转]Business Model Canvas（商业模式画布）：创业公司做头脑风暴和可行性测试的一大利器

    本文转自:http://www.36kr.com/p/214438.html 本文来自First Round Review,他们准备的文章既讲故事,还同时向创业者提供可操作的建议,以助力打造优秀的公司 ...