Ajax를 사용하여 대용량 파일 업로드 기능을 구현하는 방법-JS 튜토리얼-php.cn

Ajax를 사용하여 대용량 파일 업로드 기능을 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-03-30 17:04:30

원래의

2630명이 탐색했습니다.

이번에는 ajax를 사용하여 대용량 파일을 업로드하는 기능을 구현하는 방법과 ajax를 사용하여 대용량 파일을 업로드할 때 어떤 노트가 있는지 살펴보겠습니다.

PHP에는 파일 업로드에 제한이 있다는 것은 누구나 알고 있습니다. php.ini 파일을 수정하지 않은 경우 기본 업로드 크기 제한은 2M입니다. 그렇다면 대용량 파일을 업로드하려면 어떻게 해야 할까요? , 대용량을 사용하실 수 있습니다. 파일을 자르고 업로드하시면 문제가 해결됩니다.

대용량 파일 자르기 및 업로드란 무엇인가요?

원리: HTML5의 새로운 기능을 사용하여 파일 콘텐츠를 바이너리 정보 세그먼트로 자른 다음 매번 하나의 세그먼트를 서버에 업로드합니다. 서버는 매번 업로드하는 바이너리 정보만 통합하고 저장하면 됩니다. 파일을 선택한 다음 마지막 파일이 업로드된 파일입니다.

php.ini의 기본 업로드 크기는 2M이므로 배치당 2M씩 업로드하면 테스트하는 데 시간이 오래 걸립니다. 여기서는 크기를 20M로 제한하고 최대 게시물 데이터는 28M입니다. 테스트에 편리합니다. 실제 개발 중에 매개변수를 수정할 수 없는 경우 각 배치에 업로드되는 데이터는 최대 한도를 초과할 수 없습니다.

post_max_size = 28M 
upload_max_filesize = 20M

로그인 후 복사

nginx에 업로드했기 때문에 여전히 Nginx구성 파일을 수정해야 합니다/etc/nginx/nginx.con

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

로그인 후 복사

JavaScript의 파일 개체

이 API는 이전 기사에서 이미 사용했습니다. File 개체는 파일

Blob 개체의 크기, 이름, 유형 및 기타 정보를 JavaScript

에 저장합니다. Blob 개체는 바이너리 개체이며 File 개체의 상위 클래스이기도 합니다. 매우 중요한 메서드가 있습니다. Blob 객체: Slice() 메소드에서 이 메소드를 사용하여 파일 내용을 이진 정보로 잘라낼 수 있습니다. Slice() 메소드는 시작 오프셋, 종료 오프셋, 선택적 MIME 유형의 세 가지 매개변수를 허용합니다. MIME 유형이 설정되지 않은 경우 새 Blob 객체는 상위 객체와 동일한 MIME 유형을 갖습니다.

업로드 페이지 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>

로그인 후 복사

데이터 수신 페이지 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); 
} 
?>

로그인 후 복사

테스트 전 업로드 폴더를 먼저 생성해주세요

리눅스 시스템이라면 업로드 권한을 꼭 주셔야 한다는 점

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

로그인 후 복사

믿겠습니다 이 기사의 사례를 읽었습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Ajax를 사용하여 대용량 파일 업로드 기능을 구현하는 방법