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. 还在使用集合类完成这些功能？不妨来看看 Guava 集合类!!!

    日常开发中,小黑哥经常需要用到 Java 提供集合类完成各种需求.Java 集合类虽然非常强大实用,但是提供功能还是有点薄弱. 举个例子,小黑哥最近接到一个需求,从输入一个文档中,统计一个关键词出现的 ...

  2. 【Python】pyinstaller打包运行报错failed to execute script main

    前言 最近用pyinstaller打包的时候一直报"failed to execute script main". 最终使用"pyinstaller --hidden-i ...

  3. 从 Spring 的环境到 Spring Cloud 的配置

    需求 不知不觉,web 开发已经进入 “微服务”.”分布式” 的时代,致力于提供通用 Java 开发解决方案的 Spring 自然不甘人后,提出了 Spring Cloud 来扩大 Spring 在微 ...

  4. C语言 变量初始化二进制、八进制、十六进制

    int a1 = 10;   //十进制 int a2 = 0b10;  //二进制 int a3 = 010;    //八进制 int a4 = 0x10;  //十六进制 打印的结果:

  5. 【简介】OpenOCD 由jtag操作到parport driver流程

    1. 定义 jtag_command_type 在 OpenOCD 中,JTag 命令在枚举 jtag_command_type 中定义,定义如下: /** * The type of the @c ...

  6. Java高效编程：总结分享

    参考资料:慕课网:Java高效编程收费实战课程.博客园.CSDN.菜鸟教程以及其他文档. 篇幅受限,不太想针对每个点都写篇博客,有的地方可能写的不是很详细,一笔带过了.如果你觉得那个点在项目中用得上可 ...

  7. shell脚本基础-四种启动方式

    1.当前路径启动 ./test.sh 2.绝对路径启动 pwd /data/beijing 'pwd'/test.sh 3.指定解释器执行 sh test.sh bash test.sh 4.shel ...

  8. Redis源码分析： String（SDS）容量调整分析

    整体思路: 1 惰性缩容.不释放空间,留给到期释放等机制释放. 2 加倍扩容.在需要空间达1M之前按新空间两倍分配空间,否则按新空间大小+1M分配.注意,1M=1024*1024*Char.Char可 ...

  9. 简易版cnlog

    目录 简易版cnlog html文件 mycess.cess 页面效果 简易版cnlog 注意的点 1.一定先分好块标签,再基于一个个块标签进行装饰(相当于给一个个人化妆) 2.浮动: 我的理解是从一 ...

  10. [Docker03] Deploy LNMP on Docker

    Deploy MYSQL docker pull mysql 挂载卷保存数据文件 mkdir -p /mysql/data chmod -p 777 /mysql/data MySQL使用过程中的环境 ...