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的date的相关知识

    最近做项目,用了new Date().getTime()获取本地时间,但是如果用户篡改了手机时间,程序漏洞明显暴露.所以如果为保证程序的稳健安全性,应该是要使用网络时间的,也就是服务器时间.原理就是使 ...

  2. java算法--普通队列

    数据结构队列 首先明确一下队列的概念. 队列是一种有序列表,使用数组的结构来存储队列的数据. 队列是一种先进先出的算法.由前端加入,由后端输出. 如下图: ​ 第一个图 第二个图 第三个图 这就是队列 ...

  3. python 关于函数递归调用自己

    爬取b站博人传 每页短评20个,页数超过1000页, 代码如下 import requests import json import csv def main(start_url): headers ...

  4. 【.net core】电商平台升级之微服务架构应用实战

    一.前言 这篇文章本来是继续分享IdentityServer4 的相关文章,由于之前有博友问我关于微服务相关的问题,我就先跳过IdentityServer4的分享,进行微服务相关的技术学习和分享.微服 ...

  5. Robotutor Scratch3.0 在线编程平台升级啦！

    Robotutor推出的Scratch3.0在线编程平台受到很多编程老师和学员的喜爱,上一个版本我们提供了用户注册,找回密码,个人项目的在线保存和浏览,社区分享评论. 我们根据实际的教学需要,用户角色 ...

  6. 简说Python之flask-SQLAlchmey的web应用

    目录 原生语句操作MySQL数据库 1.安装MySQL 2.MySQL设置用户和权限 3.用PyMySQL操纵MySQL数据库 4. CRUD增,删,改,查 使用SQLAlchemy 1.安装SQLA ...

  7. 【Java面试题】List如何一边遍历，一边删除？

    这是最近面试时被问到的1道面试题,本篇博客对此问题进行总结分享. 1. 新手常犯的错误 可能很多新手(包括当年的我,哈哈)第一时间想到的写法是下面这样的: public static void mai ...

  8. 部署prometheus监控kubernetes集群并存储到ceph

    简介 Prometheus 最初是 SoundCloud 构建的开源系统监控和报警工具,是一个独立的开源项目,于2016年加入了 CNCF 基金会,作为继 Kubernetes 之后的第二个托管项目. ...

  9. 【问题记录】记一次ConnectionTimeout问题排查

    最近做性能测试时,发现连接第三方系统时会有约1%的交易提示如下错误 nested exception is org.apache.commons.httpclient.ConnectTimeoutEx ...

  10. 大数据软件安装之HBase（NoSQL数据库）

    一.安装部署 1.Zookeeper正常部署 (见前篇博文大数据软件安装之ZooKeeper监控 ) [test@hadoop102 zookeeper-3.4.10]$ bin/zkServer.s ...