AJAX数据交互及文件上传功能

一、文件下载
正常情况下，要文件压缩

<a href = "test.zip">点击就下载</a>

没有压缩的话会直接打开

<a href = "test.txt">点击就下载</a>

let btn = document.querySelector("input");
btn.onclick = function(){
  let link = document.createElement("a");
  link.download = "文件.txt";
  link.href = "test.txt";
  link.click();
}
//演示文件操作功能
const str = "hello";
downLoadFile("test.doc", str);
function downLoadFile(fileName, content){
  const blob = new Blob([content], {type:"application/msword"});
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.download = fileName;
  link.href = url;
  link.click();
} 

二、请求php资源
跨域请求都是后端解决的，前端只是通过各种方式去发起请求

let xhr = new XMLHttpRequest();
xhr.onload = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    console.log(xhr.response);
  }
}
xhr.open("get", "data.php", true);
xhr.send();

<?php

header('Access-Control-Allow-Origin:*');

$arr = array(
  array(
    'id' => 1,
    'name' => '张三',
    'age'=>20
  )
);

echo json_encode($arr);

三、jsonp
本质就是返回函数的调用

function myData(data){
  console.log(data);
}
createJsonp();
function createJsonp(){
  let s = document.createElement("script");
  s.src = "jsonp.php?callback=myData";
  document.body.appendChild(s);
}

<?php
  header('Access-Control-Allow-Origin:*');

  $jsonp = $_GET['callback'];
  $arr = array('张三', 18);
  echo $jsonp.'('.json_encode($arr).')';

四、upload

let ipt = document.querySelector("input");
let div = document.querySelector("div");
let p = document.querySelector("p");
ipt.addEventListener('change', function(){
  //console.log(this.value);//只是字符串，不代表路径，表示value
  if(this.value){
    let oFile = this.files[0];
    uploadFiles(oFile);
    this.value = "";
  }
})
div.addEventListener("dragover", function(e){
  e.preventDefault();
  e.stopPropagation();
})
div.addEventListener("drop", function(e){
  e.preventDefault();
  e.stopPropagation();
  let oFile = e.dataTransfer.files[0];
  uploadFiles(oFile);
})
//既可以通过表单控件，又可以通过H5拖拽的实现图片预览
function uploadFiles(oFile){
  let blob = new Blob([oFile]);  //第一个参数一定是一个数组，第二个是mime类型
  let url = window.URL.createObjectURL(blob);
  let img = new Image();
  img.width = 300;
  img.height = 150;
  img.src = url;
  img.onload = function(){
    document.body.appendChild(this);
  }

  //文件上传功能，需要后端配置，前端只是发送数据
  const xhr = new XMLHttpRequest();
  xhr.onload = function(){

  }
  xhr.upload.onprogress = function(e){
    let scale = e.loaded/e.total;
    p.style.width = scale*window.innerWidth + "px";
  }
  const oFD = new FormData();
  oFD.append("file", oFile);
  xhr.open("post", "upload.php", true);
  xhr.send(oFD);
}

<?php
$myFile = $_FILES['file'];
$myName = $myFile['name'];
$myPath = 'upload'.$myName;

move_uploaded_file($myFile['tmp_name'], $myPath);