实例讲解javascript实现异步图片上传方法


Posted in Javascript onDecember 05, 2017

我们首先看下HTML代码实现的form提交部分。其中大家在测试的时候需要把test的URL更换成自己的,也可以直接写一个本地地址测试。

html代码:

<form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data">
  <input type="hidden" name="key" id="key" value="VTZ18HM64#D_L3WX" />
  <input type="file" name="uploadFiles" value="" id="fileImage" multiple='multiple' />
  <div class="upload_submit">
  <button type="button" id="fileSubmit" class="upload_btn">保存</button>
  </div>
</form>

js代码:

var Fileupload = {
  fileInput: $("#fileImage").get(0),
  dragDrop: $("#fileDragArea").get(0),
  upButton: $("#fileSubmit").get(0),
  url: $("#uploadForm").attr("action"),
  })(),
  //文件上传
  funUploadFile: function() {
   var self = this;
   for (var i = 0, file; file = this.fileFilter[i]; i++) {
    (function(file) {
     var xhr = new XMLHttpRequest();
     if (xhr.upload) {
      // 上传中
      xhr.upload.addEventListener("progress", function(e) {
       self.onProgress(file, e.loaded, e.total);
      }, false);
      // 文件上传成功或是失败
      xhr.onreadystatechange = function(e) {

      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
         self.onSuccess(JSON.parse(xhr.responseText));
         self.funDeleteFile(file);
         if (!self.fileFilter.length) {
          //全部完毕
          self.onComplete();
         }
        } else {
         self.onFailure(file, xhr.responseText);
        }
       }
      };
      //准备FormData对象
      var myForm = document.getElementById('uploadForm');
      //将文件放入FormData对象中
      formData = new FormData(myForm);

      // 开始上传
      xhr.open("POST", self.url, true);
      xhr.send(formData);
     }
    })(file);
   }
  },
  init: function() {
   var self = this;
   //上传按钮提交
   if (this.upButton) {
    console.log('提示: 当前存储服务器地址', this.url)
    this.upButton.addEventListener("click", function(e) {
     self.funUploadFile(e);
    }, false);
   }
   self.bindEvent();
  }
 };
 Fileupload = $.extend(Fileupload);
 Fileupload.init();

FormData 异步上传文件

<input type="file" id="file">

一、创建FormData放入待上传文件

//准备FormData对象
var formData = new FormData(),
 uploadFile = document.getElementById('file');
 
//将文件放入FormData对象中 
formData.append('file', uploadFile.files[0]);

二、通过xhr发送FormData数据到服务器,实现文件上传

//创建xhr对象
var xhr = new XMLHttpRequest();

//监听文件上传进度
xhr.upload.onprogress = function(evt){
 //lengthComputabel: 文件长度是否可计算
 if(evt.lengthComputable){
  //evt.loaded: 已下载的字节数
  //evt.total: 文件总字节数
  var percent = Math.round(evt.loaded*100/evt.total);
  console.log(percent);
 }
}

//监听文件传输开始 
xhr.onloadstart = function(evt){
  xhr.abort() //终止上传
}

//监听ajax成功完成事件
xhr.onload = function(evt){
 ...
}

//监听ajax错误事件 
xhr.onerror = function(evt){
 ...
}

//监听ajax被中止事件
xhr.onabort = function(evt){
 ...
}

//监听传输结束事件: 不管成功或者失败都会触发
xhr.onloaded = function(evt){
 ...
}
 
//*发起ajax请求数据
xhr.open('POST', '/url', true);
xhr.send(formData);
Javascript 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
javascript断点调试心得分享
Apr 23 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
最实用的JS数组函数整理
Dec 05 #Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 #Javascript
Vue DevTools调试工具的使用
Dec 05 #Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 #Javascript
webpack学习教程之前端性能优化总结
Dec 05 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
毕业生教师求职信
2013/10/20 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
项目经理任命书内容
2014/06/06 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
违纪开除通知书
2015/04/25 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js