zoukankan      html  css  js  c++  java
  • JS将文件像form表单一样提交到后台

    这是很简单。。

    HTML

    <div>
      <input type="file" id="myfile">
      <input type="button" value="上传" onclick="HeadPortraitPicture()">
    </div>

    JS代码

    function HeadPortraitPicture()
    {
      if (document.getElementById('myfile').files[0] != null) {//判断上传的文件是否为空
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('myfile').files[0]);//这是获取上传的文件
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/DEMO/SettingCode/Exceltolead?type=doExcel");//要传到后台方法的路径
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);//返回来的数据
        xhr.addEventListener("error", uploadFailed, false);//返回异常
        xhr.addEventListener("abort", uploadCanceled, false);//返回连接异常
        xhr.send(fd);//放入文件发送到后台
      }
    }
    function uploadProgress(evt) {
      if (evt.lengthComputable) {
        //var percentComplete = Math.round(evt.loaded * 100 / evt.total);//可以在这里接收进度条数据
      }
      else {
        alert("无法计算!");
      }
    }
    function uploadComplete(evt) {
      /* 服务器返回数据*/
      var message = evt.target.responseText;//接收返回来的数据
    }

    function uploadFailed(evt) {
      alert("上传出错.");
    }

    function uploadCanceled(evt) {
      alert("上传已由用户或浏览器取消删除连接.");
    }

  • 相关阅读:
    iOS-禁止scrollview垂直方向滚动,只允许水平方向滚动;或只允许垂直方向滚动
    MongoDB安装
    Vue运用
    egg-middleware 中间件
    如何判断扫码的客户端是微信还是支付宝
    node 短信接口的调用
    Mui 长按保存图片
    egg-sequelize --- nodejs
    egg-mongoose --- nodejs
    Mongoose 基本用法
  • 原文地址:https://www.cnblogs.com/HeKaiYue/p/7147752.html
Copyright © 2011-2022 走看看