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. 从0系统学Android--5.2 发送广播

    从0系统学Android--52 发送广播 本系列文章目录:更多精品文章分类 本系列持续更新中.... 初级阶段内容参考<第一行代码> 5.3 发送自定义广播 前面已经学习了如何接受广播了 ...

  2. 17-Java-文件上传报错(commons-fileupload包和commons-io包不支持JDK版本：UnsupportedClassVersionError: org/apache/commons/io/IOUtils : Unsupported major.minor version 52.0）

    文件上传报错(commons-fileupload包和commons-io包不支持JDK版本) 这个bug可把我弄惨了!!!我代码是想通过写个文件上传,我写的文件上传需要用到commons-fileu ...

  3. 深入理解React key

    一 react 组件元素的 diff 算法 二 key 的理解 概述 react 中的key 属性,它是一个特殊的属性,它的出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key ...

  4. video标签加载视频有声音却黑屏

    问题 昨天用户上传了一个视频文件,然而发现虽然有声音但是黑屏. 解释 因为原视频的编码是用 mp4v 格式的,它需要专用的解码器.而 chrome 并不支持,所以无法播放. 然后如果用转码功能转成用 ...

  5. 一、create-react-app的安装及使用

    一.安装create-react-app 1.在全局环境中安装create-react-app npm install -g create-react-app 2.在您所需要的目录(盘)下生成一个项目 ...

  6. 通过js自动判断移动终端设备（ios\android等）

    当用户用移动设备扫描一个二维码是,将扫描后的链接链接到一个页面,该页面只包含判断移动终端设备的js,判断好后自动跳转到对应的链接 或下载对应的内容. html代码如下: <script> ...

  7. MySQL：GROUP_CONCAT函数的使用

    原文链接 GROUP_CONCAT功能 将某个字段的值拼接成字符串. 举例使用 先看一下原始数据表 执行下面sql语句 SELECT `cid`,GROUP_CONCAT(mid) AS `mids` ...

  8. Swift 4.0 中的错误处理及抛出错误

    在Swift的标准库,很多方法名后都带有'throws'这个关键词, 'throws'表示该方法在执行过程中遇到错误则抛出,但不会crash. 下面是Swift标准库中的一个构造方法,String.D ...

  9. 【python 数据结构】相同某个字段值的所有数据（整理成数组包字典的形式）

    class MonitoredKeywordMore(APIView): def post(self, request): try: # 设置原生命令并且请求数据 parents_asin = str ...

  10. Python之open()函数

    Python内置了读写文件的函数open(). # 方法一 # 使用Python内置的open()函数,传入文件名和标示符 f = open('E:/test/driver.py', 'r', enc ...