互联网技术 · 2024年2月22日 0

ajax实现文件分片上传实例代码

这篇文章主要给大家介绍了关于ajax异步实现文件分片上传的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

使用Ajax上传文件的应用场景颇多,比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容,下面话不多说了,来一起看看详细的介绍吧

实例代码:

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <title>JS分片上传-极速上传</title>
</head>
<body>
 <input type=”file” name=”slice” id=”slice” >
 
 <div id=”output”><!– 信息存放地 –> </div>
<br/>
</body>
<script src=”

http://libs.baidu.com/jquery/1.8.3/jquery.min.js”></script>

<script type=”text/javascript”>
 $(“#slice”).change(function(event) {
  var file = $(“#slice”)[0].files[0];
  var name = file.name;
    //进行初始化
    $.ajax({
      type:”POST”, //请求方式
     url:”http://localhost:8080/getuploadId”,

      async: false,
      dataType:”json”, //返回数据类型
      data:{
        fileName:name,
      },
      success:function(data){ //请求成功后       
       console.log(“data.code=”+JSON.stringify(data));
       console.log(“data.data.objectName=”+data.data.objectName);
       console.log(“data.data.uploadId=”+data.data.uploadId);  
       var objectName=data.data.objectName;
       var uploadId=data.data.uploadId;
       //成功后执行分段上传
       PostFile(file,0,objectName,uploadId);
       //合并
       combineFile(objectName,uploadId);
       
       
       },
      error:function (){
       alert(“系统出现异常!”);
       flag=false;
      }
   &nbsp