效果

实现过程分为两步

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. linux中一些常用的目录简要说明

    1.目录结构 /bin:binary的缩写,一些常用的命令如:ls.qwd.cp.cd等命令保存在这个文件内. /boot:启动linux时需要使用到的一些核心文件,以及一些镜像等,删除后系统将无法开 ...

  2. scipy 的K-means

    #导入相应的包 import scipy import scipy.cluster.hierarchy as sch from scipy.cluster.vq import vq,kmeans,wh ...

  3. c# 坑人的发邮件组件

    System.Net.Mail 在服务器25端口被封禁的情况下,无法使用其它诸如SSL 465端口发送.用过时的System.Web.Mail却可以.是微软更新速度太快呢,还是标准不一致呢. Syst ...

  4. himm的使用

    1.设置管脚复用 himm 0x200F0100 1 himm 0x200F0104 1 2.设置GPIO_DIR himm 0x201C0400 0xff 3.设置GPIO_DATA himm 0x ...

  5. day02 进制之间的转换and计算机编码叙述

    一. 进制的转好技巧  二进制:0 1 八进制:0 1 2 3 4 5 6 7 十进制:0 1 2 3 4 5 6 7 8 9 十六进制:0 1 2 3 4 5 6  7 8 9 A B C D E ...

  6. 西门子S7-200SMART PLC视频教程（百度网盘）

    西门子S7-200SMART PLC视频教程(百度网盘)西门子S7-200 SMART PLC是西门子公司推出的高性价比小型plc,是国内广泛使用的S7-200PLC的更新换代产品. 以下是关于S7- ...

  7. Git 安装和使用教程

    Git 安装和使用教程 git 提交 全部文件 git add .  git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件.注意 ...

  8. Vue基础开发笔记

    以下实例代码地址:https://github.com/NewBLife/VueDev 1,Vue组件导入 新建组件:Header.vue <template> <div> & ...

  9. springmvc功能以及源码实现分析

    每当我学习一个新技术时,我总是会问自己这个技术有哪些功能,能帮我解决哪些问题. 但是当我在网上进行搜索时,答案并不让我满意. 在使用springmvc很久以后,我将在这篇文章里对springmvc功能 ...

  10. 用户层APC队列使用

    一 参考 https://docs.microsoft.com/en-us/windows/desktop/api/processthreadsapi/nf-processthreadsapi-que ...