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

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

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册