This time I will show you how to use ajax to implement the function of uploading largefiles, and what are theprecautionsfor 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：

        
  
大文件切割上传
   

Receive data page upload.php：

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!

Recommended reading:

How to use Ajax to asynchronously check whether the user name is duplicated

ajax should get json data as undefined how to use

The above is the detailed content of How to use ajax to implement large file upload function. For more information, please follow other related articles on the PHP Chinese website!