效果

实现过程分为两步

1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片

2. 通过FormData对象生成表单数据，通过ajax上传到后台

HTML

<style>

    .file-box{display: inline-block;position: relative;padding: 3px 5px;overflow: hidden;color:#fff;background-color: #ccc;}

    .file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}

    .prev-box{display: inline-block; min-width: 200px;min-height: 120px;border-radius: 5px;padding: 5px;border:1px #ccc dotted;}

</style>

<body>

    <form id="form1">

        <div class="file-box">

            <input type="file" class="file-btn" onChange="uploadImg(this)" accept="image/*" name="image"/>

            上传文件

        </div>

        <br>

        <div class="prev-box" id="prev-box">

            <img style="width: 200px;" id="img">

        </div>

        <div id="uploadMsg" style="color: #f00"></div>

    </form>

</body>

JS

function uploadImg(obj){

    //1. 图片预览

    //如果浏览器不支持 FileReader 则用文字提示

    if(typeof FileReader == 'undefined'){

        var prevBox = document.getElementById('prev-box')

        prevBox.innerHTML = "浏览器不支持预览"

    }else{

        //获取上传文件，返回 File对象

        var file = obj.files[0];

        var reader = new FileReader()

        //注册读取成功的回调函数

        reader.onload = function (e) {

            var img = document.getElementById("img");

            img.src = e.target.result;

        }

        //开始以 DataURL格式读取文件

        reader.readAsDataURL(file)

    }

    //2. 图片上传

    if(typeof FormData == 'undefined'){

        alert('浏览器不支持图片上传')

    }else{

        var form = document.getElementById('form1')

        var data = new FormData(form)

        //添加自定义字段

        data.append("CustomField", "This is some extra data")

        //ajax请求

        var httpRequest = new XMLHttpRequest();

        httpRequest.open("POST", "upload.php", true);

        httpRequest.onload = function(oEvent) {

            if (httpRequest.status == 200) {

                //服务器返回的保存路径

                console.log(httpRequest.responseText)

            } else {

                document.getElementById('uploadMsg').innerHTML = '图片上传失败，错误码:' + httpRequest.status

            }

        };

        httpRequest.send(data);

    }

}

相关知识

1. 通过获取 <input type="file" /> 的files获取结果为 File对象的伪数组集合

2. FileReader 支持输出多个格式 readAsDataURL( ) 、readAsText( ) 、readAsArrayBuffer( )，他们都接收一个 File 或者 Blob 对象作为参数

3. FileReader 对象支持多个事件回调 onloadstart( ) --开始读取、onprogress( ) --正在读取、onabort( ) --读取中断、onload( ) -- 读取成功,读取成功后数组保存在事件对象中 e.target.result

4. FromData 对象可以单独创建，也可以通过Form创建，使用append添加字段

5. 如果FormData对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中 。

原生JS实现异步图片上传（预览）的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  3. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  4. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  7. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  8. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. cin.ignore

    功能:函数用于输入流.它读入字符,直到已经读了num 个字符(默认为1)或是直到字符delim 被读入(默认为EOF).其调用形式为cin.ignore(n,终止字符)       原型:istrea ...

  2. MySQL1-安装

    MySQL 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据 ...

  3. Python控制台颜色

    Python控制台颜色 格式:\033[显示方式;前景色;背景色m 说明: 前景色 背景色 颜色 30 40 黑色 31 41 红色 32 42 绿色 33 43 黃色 34 44 蓝色 35 45 ...

  4. Vector Math for 3D Computer Graphics (Bradley Kjell 著)

    https://chortle.ccsu.edu/VectorLessons/index.html Chapter0 Points and Lines (已看) Chapter1 Vectors, P ...

  5. 存储专栏：一句话说清RAID2.0

     今天,西瓜哥来谈谈高端存储的一股势力,RAID 2.0,最近被华为HVS搞得风生水起,神奇的让人摸不着头脑.我还是从一个高端存储的江湖说起吧. 据说很久很久以前(别扔臭鸡蛋,讲故事都是这样的…),L ...

  6. Linux运维小知识

    自己日常用到的命令稍微备份一下: 版本确认 CentOS / RedHat Enterprise cat /etc/redhat-release Ubuntu cat /etc/lsb-release ...

  7. elasticSearch 2.3 delete-by-query plugin

    The delete-by-query plugin adds support for deleteing all of the documents which match the specified ...

  8. 自定义页面微信、微博、QQ分享效果

    几行简单的分享代码既可以实现,先看下效果: 第一步:页面因为结构代码 <div id="freebtn"> <ul> <li class=" ...

  9. RESTful levels、HATEOAS

    概述: REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fiel ...

  10. hugo小玩

    hugo小玩 1. 安装 install from source by brew install pre-built-binary 2. 下载源码 $ go get github.com/magefi ...