<!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. python解决list unicode转中文显示

    #!/usr/bin/python# #-*-coding:UTF-8-*- import xlrd book = xlrd.open_workbook('Interface_data.xlsx') ...

  2. FluentData - 轻量级.NET ORM持久化技术解决方案

    官方地址:http://fluentdata.codeplex.com/ 官方教程:http://fluentdata.codeplex.com/documentation FluentData入门 ...

  3. Golang 入门 : 理解并发与并行

    Golang 的语法和运行时直接内置了对并发的支持.Golang 里的并发指的是能让某个函数独立于其他函数运行的能力.当一个函数创建为 goroutine 时,Golang 会将其视为一个独立的工作单 ...

  4. UTF-8格式的文本文件程序读取异常

    最近在windows服务器上直接创建并手打输入配置参数,比如设置概率0.6,然后用java程序打开读取该参数,在本地linux环境下测试完全正常,但是一放到服务器上,就报NotNumber错误,查看了 ...

  5. python_pdb断点调试常用命令

    Python pdb调试 在需要断点调试的地方,加上:import pdb;pdb.set_trace() h:打印当前版本pdb可用的命令,如果需要查询某个命令,可以输入 h [command]l: ...

  6. [SDOI2016]墙上的句子

    题目描述 考古学家发现了一堵写有未知语言的白色墙壁,上面有一个n行m列的格子,其中有些格子内被填入了某个A至Z的大写字母,还有些格子是空白的. 一直横着或竖着的连续若干个字母会形成一个单词,且每一行的 ...

  7. Hdu 3289 Rain on your Parade (二分图匹配 Hopcroft-Karp)

    题目链接: Hdu 3289 Rain on your Parade 题目描述: 有n个客人,m把雨伞,在t秒之后将会下雨,给出每个客人的坐标和每秒行走的距离,以及雨伞的位置,问t秒后最多有几个客人可 ...

  8. ACM二分查找模板

    int main(){ == key int m; while ( l <= r ) { m = ( l + r ) >> 1; if ( x[m] == key ) return ...

  9. dalvik.system.VMRuntime 隐藏api的迷惑

    [Android UI界面]关于dalvik.system.VMRuntime 的 使用迷惑 我也遇到了相同问题.不知楼主现在解决了没有? 回答1: [Android UI界面]关于dalvik.sy ...

  10. Mybatis事务处理

    知识点有事务处理的配置,还有事务处理的方法 事务处理的配置: mybatis的事务处理由两种方式控制,JDBC和MANAGED:  MANAGED就是说事务处理由第三方的插件来完成,比如说spring ...