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. js中（event）事件对象

    事件对象 • 什么是事件对象? • 就是当你触发了一个事件以后,对该事件的一些描述信息 • 例如: ° 你触发一个点击事件的时候,你点在哪个位置了,坐标是多少 ° 你触发一个键盘事件的时候,你按的是哪 ...

  2. Druid未授权（弱口令）的一些利用方式

    Druid简介 1.Druid是阿里巴巴数据库事业部出品,为监控而生的数据库连接池. 2.Druid提供的监控功能,监控SQL的执行时间.监控Web URI的请求.Session监控. Druid可能 ...

  3. 实验三——NFS服务器配置

    实验三——NFS服务器配置 实 验 基 本 信 息 实验名称:NFS服务器配置(3学时) 实验时间:    年 月 日 实验地点:   信工606实验室 同组同学: 实验目的: 了解NFS服务的基本原 ...

  4. Java集合04——fail-fast&fail-safe 详解

    在前几个回合中,我们已经详细了解过了 Java 集合中的List.Set 和 Map,对这部分内容感兴趣的朋友可以关注我的公众号「Java面典」了解.今天我们将为各位介绍集合的失败机制--fail-f ...

  5. 学习ConcurrentHashMap1.7分段锁原理

    1. 概述 接上一篇 学习 ConcurrentHashMap1.8 并发写机制, 本文主要学习 Segment分段锁 的实现原理. 虽然 JDK1.7 在生产环境已逐渐被 JDK1.8 替代,然而一 ...

  6. 扩展el-input 加一个控制精度的命令（directives）

    使用el-input时 出现需要精度控制的需求,因为每一个el-input需要精度不用 所以我给这个虚拟dom绑定了一个精度值,根据这个值去控制精度. 下面附上代码: html: <el-inp ...

  7. 5.创建app、创建user表、配置media、数据迁移

    目录 user模块User表 创建user模块 创建User表对应的model:user/models.py 注册user模块,配置User表:dev.py 配置media 数据库迁移 user模块U ...

  8. CentOS7采用tar.gz包方式安装Mysql5.7

    软件:VMware Linux版本:CentOS 7 一.安装mysql(采用tar.gz包安装Mysql5.7) 1.安装开发工具包 [root@localhost ~]# yum groups m ...

  9. echarts legend文字配置多个颜色（转）

    困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...

  10. MyBatis框架——延迟加载

    延迟加载也叫惰性加载或者懒加载,使⽤延迟是为了提⾼程序的运⾏效率,具体是通过尽量少执⾏ SQL 语句来提升效率.Java 程序与数据库的交互频率越低越好,MyBatis 提供的延迟加载功能就可以做到这 ...