Home >Web Front-end >JS Tutorial >How to use ajax to implement large file upload function

How to use ajax to implement large file upload function

php中世界最好的语言Original: 2018-03-30 17:04:302713browse

This time I will show you how to use ajax to implement the function of uploading large files, and what are the precautions for using ajax to upload large files. The following is a practical case, one Get up and take a look.

Everyone knows that PHP has restrictions on uploading files. If the php.ini file has not been modified, the default upload size limit is 2M, so how to upload a large file, for example, upload a large file of more than 1G , which can be solved by cutting and uploading large files.

What is cutting and uploading large files?

Principle: Use the new features of HTML5 to cut the file content into segments of binary information, and then upload one segment to the server each time. The server only needs to integrate and store the binary information we upload each time. into a file, then the final file is the uploaded file.

Since the default upload size of php.ini is 2M, if each batch is uploaded to 2M, it will take a long time when I test. Here I limit the size to 20M, and the maximum post data is 28M, which is convenient for testing. . If its parameters cannot be modified during actual development, the data uploaded in each batch cannot exceed the maximum limit.

post_max_size = 28M 
upload_max_filesize = 20M

I uploaded it in nginx, so I still need to modify the NginxConfiguration file/etc/nginx/nginx.con

//在http{} 里面加即可 
client_max_body_size 50m　　　#客户端最大上传大小 50M

File object in JavaScript

We have already used this API in the previous article. The File object stores the size, name, type and other information of the file

Blob object in JavaScript

The Blob object is a binary object and is also the parent class of the File object. There is a very important method in the Blob object: the slice() method. Using this method, we can cut the file content into binary information. The slice() method accepts three parameters, a starting offset, an ending offset, and an optional mime type. If the mime type is not set, the new Blob object has the same mime type as the parent.

Upload page index.php：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>大文件切割上传</title> 
  <link rel="stylesheet" href=""> 
  <script> 
    function selfile(){ 
      const LENGTH = 1024 * 1024 * 10;//每次上传的大小 
      var file = document.getElementsByName('video')[0].files[0];//文件对象 
      var filename=document.getElementsByName('video')[0].files[0].name; 
      var totalSize = file.size;//文件总大小 
      var start = 0;//每次上传的开始字节 
      var end = start + LENGTH;//每次上传的结尾字节 
      var fd = null//创建表单数据对象 
      var blob = null;//二进制对象 
      var xhr = null;//xhr对象 
      while(start < totalSize){ 
        fd = new FormData();//每一次需要重新创建 
        xhr = new XMLHttpRequest();//需要每次创建并设置参数 
        xhr.open(&#39;POST&#39;,&#39;upload.php&#39;,false); 
        blob = file.slice(start,end);//根据长度截取每次需要上传的数据 
        fd.append(&#39;video&#39;,blob);//添加数据到fd对象中 
        fd.append(&#39;filename&#39;,filename); //获取文件的名称 
        xhr.send(fd);//将fd数据上传 
 
        //重新设置开始和结尾 
        start = end; 
        end = start + LENGTH; 
 
      } 
 
    } 
  </script> 
</head> 
<body> 
<h1>大文件切割上传</h1> 
<input type="file" name="video" onchange="selfile();" /> 
</body> 
</html>

Receive data page upload.php：

<?php 
/** 
 * 大文件切割上传，把每次上传的数据合并成一个文件 
 */ 
 
$filename = &#39;./uploads/&#39;.$_POST[&#39;filename&#39;];//确定上传的文件名 
//第一次上传时没有文件，就创建文件，此后上传只需要把数据追加到此文件中 
if(!file_exists($filename)){ 
 move_uploaded_file($_FILES[&#39;video&#39;][&#39;tmp_name&#39;],$filename); 
}else{ 
 file_put_contents($filename,file_get_contents($_FILES[&#39;video&#39;][&#39;tmp_name&#39;]),FILE_APPEND); 
} 
?>

Before testing, create the uploads folder first

If it is linux For the system, remember to give permission to uploads

sudo chmod -R 777 uoloads/  //赋予uploads文件夹 777 权限  -R 递归子文件

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to use ajax to implement large file upload function

Related articles