express_server.js

const express=require('express');     //主体

const body=require('body-parser');    //接收普通POST数据

const multer=require('multer');       //接收文件POST数据

const mysql=require('mysql');

let db=mysql.createPool({host: 'localhost', port: 3309, user: 'root', password: '', database: '20180208'});

let server=express();

server.listen(8080);

//中间件

server.use(body.urlencoded({extended: false}));

let multerObj=multer({dest: './upload/'});

server.use(multerObj.any());

//处理请求

server.use('/api', (req, res)=>{

  if(req.headers['origin']=='null' || req.headers['origin'].startsWith('http://localhost')){

    res.setHeader('Access-Control-Allow-Origin', '*');

  }

  let arr=[];

  req.files.forEach(file=>{

    arr.push(`('${file.originalname}', '${file.filename}', ${Math.floor(Date.now()/1000)})`);

  });

  let sql=`INSERT INTO image_table (originalname, filename, time) VALUES${arr.join(',')}`;

  //console.log(sql);

  db.query(sql, (err)=>{

    if(err){

      res.send('不OK');

    }else{

      res.send("OK");

    }

  });

});

//

server.use(express.static('./www/'));

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

    .parent {width:500px; height:20px; border:1px solid black;}

    .child {width:0; height:100%; background:green;}

    </style>

    <script>

    window.onload=function (){

      let oF=document.getElementById('f1');

      let oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){

        let data=new FormData();

        Array.from(oF.files).forEach(file=>{

          data.append('f1', file);

        });

        //

        let oAjax=new XMLHttpRequest();

        //POST

        oAjax.open('POST', `http://localhost:8080/api`, true);

        oAjax.onprogress=function (ev){

          console.log(ev);

        };

        oAjax.upload.addEventListener('progress', function (ev){

          /*let oM=document.getElementById('m1');

          oM.value=100*ev.loaded/ev.total;*/

          let oChild=document.getElementsByClassName('child')[0];

          oChild.style.width=100*ev.loaded/ev.total+'%';

        }, false);

        oAjax.send(data);

        /*

        oAjax.onreadystatechange=function (){

          if(oAjax.readyState==4){

            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){

              alert('成功');

            }else{

              alert('失败');

            }

          }

        };*/

      };

    };

    </script>

  </head>

  <body>

    <div class="parent">

      <div class="child">

      </div>

    </div>

    <input type="file" id="f1" multiple /><br>

    <input type="button" value="提交" id="btn1">

  </body>

</html>

ajax2.0之文件上传加跨域的更多相关文章

  1. Servlet3.0学习总结——基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...

  2. Servlet3.0学习总结(三)——基于Servlet3.0的文件上传

    在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不 ...

  3. java-基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet3.0中使用request.getParts()获取上传文件

  4. Servlet3.0之八：基于Servlet3.0的文件上传@MultipartConfig

    在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不 ...

  5. phpcms v9.6.0任意文件上传漏洞(CVE-2018-14399)

    phpcms v9.6.0任意文件上传漏洞(CVE-2018-14399) 一.漏洞描述 PHPCMS 9.6.0版本中的libs/classes/attachment.class.php文件存在漏洞 ...

  6. servlet3.0的文件上传代码配置怎么写

    之前学习过xml配置servlet3.0的文件上传,但是变成code方式一直不知道怎么弄,相比较起来apache的文件上传配置和xml倒是没什么太大区别. 直接上代码:无需依赖,只要一个方法就好了cu ...

  7. springMVC3.0（文件上传，@RequestMapping加參数,@SessionAttributes,@ModelAttribute，转发，重定向，数值获取，传參，ajax,拦截器)

    1.项目包结构例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsiz ...

  8. net core WebApi——文件分片上传与跨域请求处理

    目录 前言 开始 测试 跨域 小结 @ 前言 在之前整理完一套简单的后台基础工程后,因为业务需要鼓捣了文件上传跟下载,整理完后就迫不及待的想分享出来,希望有用到文件相关操作的朋友可以得到些帮助. 开始 ...

  9. phpcms v9.6.0任意文件上传漏洞

    距离上一次写博客已经过去很长一段时间了,最近也一直在学习,只是并没有分享出来  越来越发现会的东西真的太少了,继续努力吧. 中午的时候遇到了一个站点,看到群里好多人都在搞,自己就也去试了试,拿下来后发 ...

随机推荐

  1. 02 HDFS 分布式环境实战

    HDFS的主要设计理念 1.存储超大文件 这里的“超大文件”是指几百MB.GB甚至TB级别的文件. 2.最高效的访问模式是 一次写入.多次读取(流式数据访问)3.运行在普通廉价的服务器上 HDFS设计 ...

  2. Markdown使用说明

    # Markdown 使用说明 Markdown 是一种**轻量级标记语言** 使用规则: 1. 标题   2. 列表 3. 引用 4. 图片与链接 5. 粗体与斜体 6.表格 7. 代码框 8. 分 ...

  3. java面试题汇总四

    第三部分 Java SE基础 3.1 java多线程 3.1.1 线程的实现方式,怎么启动线程怎么区分线程? 1.线程的实现方式: 有 4 种方式可以用来创建线程: 2.继承 Thread 类   2 ...

  4. 求你了，别再说Java对象都是在堆内存上分配空间的了！

    Java作为一种面向对象的,跨平台语言,其对象.内存等一直是比较难的知识点,所以,即使是一个Java的初学者,也一定或多或少的对JVM有一些了解.可以说,关于JVM的相关知识,基本是每个Java开发者 ...

  5. C++ 别踩白块小游戏练习

    #include <iostream> #include <stdio.h> #include <stdlib.h> #include <easyx.h> ...

  6. ASP.net MVC 构建layui管理后台(整体效果)

    登录页: 首页 模块管理 角色管理,角色分配 用户管理

  7. 谈谈一些逻辑相同，性能差异却很大的sql

    总结写在前面: 1. 本篇讲述了三个例子,其本质都是揭示了若对索引字段做函数操作,可能会破坏索引值的有序性,由此优化器就决定放弃走树搜索功能. 2. 由第1点提供了一个优化思路,即我们能否避免或转化s ...

  8. JS中的call()方法和apply()方法用法总结（挺好 转载下）

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...

  9. 深度学习与人类语言处理-语音识别(part3)

    上节回顾深度学习与人类语言处理-语音识别(part2),这节课我们接着看seq2seq模型怎么做语音识别 上节课我们知道LAS做语音识别需要看完一个完整的序列才能输出,把我们希望语音识别模型可以在听到 ...

  10. Servlet（简介，请求参数，页面跳转，生命周期，创建，配置，ServletContext，线程）

    1.Servlet简介 servlet是java servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序, 主要功能在于交互式浏览和修改数据,生成动态的web内容 服务端运行的 ...