ajax上传文件显示进度

简介: ajax上传文件显示进度的操作,文章后有演示地址,以及封装成vue的插件

下面要做一个ajax上传文件显示进度的操作: 
1102860-20180817120206270-1407048366.png
这里先上代码:

1、前端代码

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
  <style>
    .progress-area {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="">
    <p>文件上传</p>
    <div>
      <input type="file" name="file" id="file" />
      <div class="img-preview">
          <p>图片预览(如果上传文件时图片)</p>
          <img id="image" src="" width="200" />
      </div>
      <button id="upload">上传</button>
      <button id="btn">终止上传</button>
      <div class="progress-area">
        进度
        <div class="progress">
          <div class="progress-bar" id="progress" role="progressbar"  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function () {
        'use strict';
        var file = document.querySelector('#file');
        var upload = document.querySelector('#upload');
        var progress = document.querySelector('#progress');
        var image = document.querySelector('#image');
        var xhr = new XMLHttpRequest();

        var loaded = 0;
        var total = 0;

        upload.addEventListener('click', uploadFile, false);
        file.addEventListener('change', previewImage, false);

        // 点击上传
        function uploadFile(event) {
          if(!file.files[0]) {
            alert('请选择文件')
            return
          }
          var formData = new FormData(); 
          // 利用这个来提交xhr,具体的可看下面的mdn 介绍
           // https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
          formData.append('test-upload', file.files[0]); 
          // 将input 选择出来的文件调用append()方法来添加字段
          xhr.onload = uploadSuccess; 
          // 上传方法
          xhr.upload.onprogress = setProgress;
          // 上传过程方法
          xhr.open('post', '/upload', true);
          // 打开请求方式和接口
          xhr.send(formData);
          // 发送数据
        }

        // 成功上传
        function uploadSuccess(event) {
          if (xhr.readyState === 4 && xhr.status === 200) { // 判断接口调用成功的重要标识
            setTimeout(()=> {
              alert('上传成功')
              // window.location.href="/"
            },1000)
          }
        }

        // 进度条
        function setProgress(event) {
          console.log(event)
          if (event.lengthComputable) { 
          // 先判断这个上传进程是否有这个文件长度的判断
            loaded = event.loaded 
            // 已经加载的字节
            total = event.total 
            // 上传伊始时候计算的总字节数
            var complete = Number.parseInt(event.loaded / event.total * 100);
            // 取百分比
            progress.style.width = complete + '%';
            progress.innerHTML = complete + '%';
            // css 偷了懒,用了bootstrap4的css
          }
        }

        // 图片预览
        function previewImage(event) {
          var reader = new FileReader(); 
          // h5 的新属性 
          reader.onload = function (event) {
            image.src = event.target.result; 
            // 这里是用图片base64的字符串将图片显示出来,用作图片上传预览
          };
          reader.readAsDataURL(event.target.files[0]);
        }

        //++++++++++++++++++++++++++++++++++++++++++++
        xhr.onloadstart = function(){
          console.log("上传开始");    
        }
        btn.onclick = function(){
          xhr.abort();
          console.log("上传被终止.");
          progress.style.width = 0 + '%';
          progress.innerHTML = 0 + '%';
          // 这里调用取消上传的代码
        };
        xhr.ontimeout = function(){
          console.log('上传超时.');
        }
        // xhr.timeout = 50000; // 默认为0 没有时间限制
        // xhr.onabort = function(){
        //   console.log("The transfer has been canceled by the user.");
        // }
        xhr.onerror = function(){
          console.log("上传错误,可能是断网了,也可能是断请求服务了."); 
          // 这里存在异步传输问题
          return
        }
        xhr.onloadend = function(){
          console.log("请求结束"); 
          // 发送上传的请求,至于有没有上传成功,不清楚,可能失败 成功,这里只是请求结束了 
        }
        // +++++++++++++++++++++++++++++++++++++++++++
      })();
  </script>
</body>
</html>

 

2、后端接口(nodejs)

app.js

   const express = require('express');
    const upload = require('multer')({ dest: 'uploads/' });
    const path = require('path');
    const fs = require('fs');
    const port = 8088;
    
    let  app = express();
    
    app.set('port', port);
    // index.html, index.js放在static文件夹中
    app.use(express.static(path.join(__dirname, 'static')));
    
    // app.get('/', (req, res) => {
    //   res.redirect('upload2.html');
    // });
    
    // 路由/ajax-upload 就回渲染 upload.html 页面
    app.get('/ajax-upload', function(req, res){  
      res.sendFile('upload.html', { root: __dirname });  
    });  
    app.post('/upload', upload.single('test-upload'), (req, res) => {
      // 没有附带文件
      if (!req.file) {
        res.json({ ok: false });
        return;
      }
    
      // 重命名文件
      let oldPath = path.join(__dirname, req.file.path);
      let newPath = path.join(__dirname, 'uploads/' + req.file.originalname);
      fs.rename(oldPath, newPath, (err) => {
        if (err) {
          res.json({ ok: false });
          console.log(err);
        } else {
          res.json({ ok: true });
        }
      });
    });
    // 这里还没有做上传取消 删除文件的操作
    app.get('/abort', upload.single('test-upload'), (req, res)=>{
      console.log(req, 'abort') // 删除刚才上传的文件
    })
    
    app.listen(port, () => {
      console.log("[Server] localhost:" + port);
    });

 

注:接口使用

  • 环境:nodejs
  • 项目结构 
    • static(图片如下) 
      • app.js
      • upload.html
      • uploads
  • 框架包express: npm install express –save
  • 上传包multer :npm install multer –save
  • 启动: node app.js

文件结构

以上代码可以直接复制运行:

3、解释

3.1.前端

上传简述: 前端的选择文件,掉后端上传接口,利用ajax技术将文件上传的服务器。
前端要知道后端是否上传成功或者状态,就得需要后端返回给我们的状态,最简单的就是上传成功或者失败,再者需要知道进度的就要利用xhr 的进程方法了。
  • ajax 的原理就是利用浏览器的XMLHttRequest 这个对象,因为IE浏览器不是这对象,如果要兼容的话 ,可以封装一个XHR 对象,代码可以看后面的附属部分:

  • XMLHttRequest 对象有多个方法,监控ajax 上传的进度主要利用这些属性,来达到我们的目标

  • 下面是部分属性(方法)介绍,这里是MDN的介绍 xhr 

    • onloadstart 获取开始
    • onprogress 数据传输进行中
    • onabort 获取操作终止
    • onerror 获取失败
    • onload 获取成功
    • ontimeout 获取操作在用户规定的时间内未完成
    • onloadend 获取完成(不论成功与否)

* 对xhr.upload.onprogress的解释

这里监控进度主要看这里的属性值的变化,如下图 
onprogress的属性值
具体的代码片段解释可以查看我上面的代码注释

3.2.后端

这里使用的nodejs的一个接口,之前我的用的是将前端预览图片的base64的字符串传到后端,然后后端解析这个base64的字符串,生成图片,保存在磁盘中,但是会出现问题,进度不太好显示,

所以查了相关资料,借用了某位大神的写法,直接上传文 件;还有一个就是multer包,利用这个进行上传。

这里项目也是一个后端渲染的方式,将页面渲染好,然后发送给前端。

4、附属代码:

4.1.兼容的XMLHttpRequest代码段

function XMLHttpRequest(){
    if (typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
        if (typeof arguments.callee.activeXString != "string"){
        var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
        "MSXML2.XMLHttp"],
        i, len;
        for (i=0,len=versions.length; i < len; i++){
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
            break;
            } catch (ex){
                //跳过
            }
        }
    }
         return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available.");
    }
}

 

4.2.nodejs 处理base64字符串

node包:formidable 
imgBase64Arr: 前端传值过来的 base64字符串的多张图片的数组

for(var i = 0;i<imgBase64Arr.length;i++) {
    var imgname    = util.randomStr(); // 随机字符串的方法
    imgname    = 'assets/img/'+ imgname + '.png';
    var base64     = imgBase64Arr[i].replace(/^data:image\/\w+;base64,/, "");
    //去掉图片base64码前面部分data:image/png;base64
    var dataBuffer = new Buffer(base64, 'base64'); //把base64码转成buffer对象,
    console.log('dataBuffer是否是Buffer对象:'+Buffer.isBuffer(dataBuffer));
    fs.writeFile(imgname,dataBuffer,function(err){//用fs写入文件
      if(err){
          console.log(err);
      }else{
          console.log('图片上传成功!');
      }
    })
    newimgarr.push(imgname.replace("assets",""));
}

github地址:https://github.com/adouwt/ajax-upload


前端上传这块已经封装了一个基于vue的插件,

GitHub地址:https://github.com/adouwt/vue-upload    

npm 官网上的数据显示居然已经有一定的下载量,实在很惊讶,不过也很欢迎大家学习使用,有bug,及时告知于我

 https://www.npmjs.com/package/vue-ajax-upload

如有错误,敬请指出!

这里提供了一个demo演示如下, ps:个人服务器存储较小,只是用来展示,后端是个小白,没有做一些文件过滤和后端文件风险校验,大神请绕行哈,还有请手下留情哈!
戳我

目录
相关文章
|
存储 JavaScript 前端开发
Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据
Vue 和 HTML FormData配合axios或ajax上传文件,提交表单数据
650 0
|
Web App开发 JavaScript 前端开发
前端接收数据流实现图片预览效果--ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文为转载文章 原文链接:https://www.cnblogs.com/cdemo/p/5225848.html 首先要谢谢这位大神的无私贡献!解决了我的问题也完美表达了我当时的心路历程 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。
8058 0
|
5月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
JSON 前端开发 JavaScript
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
1372 0
|
域名解析 JSON 前端开发
漏刻有时数据可视化ajax访问静态json文件使用POST方法返回405 (Method Not Allowed)的解决方案
漏刻有时数据可视化ajax访问静态json文件使用POST方法返回405 (Method Not Allowed)的解决方案
158 0
|
前端开发
Ajax模板文件
Ajax模板文件
69 0
|
文字识别 前端开发 JavaScript
spring boot +ajax上传文件前后端分离完整实现示例代码
spring boot +ajax上传文件前后端分离完整实现示例代码
spring boot +ajax上传文件前后端分离完整实现示例代码
|
开发框架 移动开发 前端开发
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
283 0
|
存储 前端开发 JavaScript
基于Flask开发网站 -- 前端Ajax异步上传文件到后台
从网页界面(前端)上传文件到服务器(后端)
456 0
基于Flask开发网站 -- 前端Ajax异步上传文件到后台