Ajax 업로드 파일 진행률 표시줄 공유 예시 Codular-PHP 튜토리얼-php.cn

Ajax 업로드 파일 진행률 표시줄 공유 예시 Codular

小云云

풀어 주다： 2023-03-18 14:06:02

원래의

1464명이 탐색했습니다.

요즘 사람들은 웹페이지를 떠나지 않고 웹페이지를 탐색하면서 다른 작업을 수행하는 것을 좋아하는데, 이는 일반적으로 Ajax를 통해 달성되지만 브라우저의 발전으로 사람들은 그렇게 하지 않습니다. 네, 이 글은 주로 Ajax 업로드 파일 진행바 Codular 관련 정보를 소개하고 있으니, 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

여기에서는 페이지를 떠나지 않고 서버에 파일을 업로드하는 방법을 설명합니다. 이전 기사에서 사용한 것과 동일한 백엔드 PHP 코드를 사용하여 업로드 진행 상황을 표시하는 동안 스크립트가 서버에 파일을 업로드합니다. 마지막으로 업로드된 파일의 링크 주소를 반환합니다. 경우에 따라 업로드된 파일의 ID 또는 기타 애플리케이션 정보를 반환할 수 있습니다. 참고: 이 코드는 이전 IE 브라우저를 지원하지 않습니다. ie10+만 지원합니다.

Let's Code

HTML 구조부터 시작하고 JavaScript부터 시작해서 PHP 코드를 제공하겠습니다. 이 부분은 이전 튜토리얼에서 채택한 것입니다. PHP 코드에 대한 설명은 별로 없습니다. .

HTML

두 개의 입력 상자를 사용해야 합니다. 하나는 파일 형식 파일이고 다른 하나는 파일 업로드 요청을 보내기 위해 클릭하는 소리를 들을 수 있는 버튼입니다. 또한 업로드 상태를 강조하기 위해 너비를 변경하는 p도 있습니다.

아래와 같이:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS File Upload with Progress</title>
  <style>
  .container {
    width: 500px;
    margin: 0 auto;
  }
  .progress_outer {
    border: 1px solid #000;
  }
  .progress {
    width: 20%;
    background: #DEDEDE;
    height: 20px; 
  }
  </style>
</head>
<body>
  <p class=&#39;container&#39;>
    <p>
      Select File: <input type=&#39;file&#39; id=&#39;_file&#39;> <input type=&#39;button&#39; id=&#39;_submit&#39; value=&#39;Upload!&#39;>
    </p>
    <p class=&#39;progress_outer&#39;>
      <p id=&#39;_progress&#39; class=&#39;progress&#39;></p>
    </p>
  </p>
  <script src=&#39;upload.js&#39;></script>
</body>
</html>

로그인 후 복사

파일 업로드 및 진행률 표시를 처리하기 위해 약간의 진행률 표시줄 스타일을 작성하고 하단에 스크립트 파일을 추가한 것을 볼 수 있습니다.

JavaScript

먼저, 우리는 우리가 사용할 태그를 가져와야 합니다. 태그에는 이미 ID가 지정되어 있습니다.

var _submit = document.getElementById(&#39;_submit&#39;), 
_file = document.getElementById(&#39;_file&#39;), 
_progress = document.getElementById(&#39;_progress&#39;);

로그인 후 복사

다음으로, 선택한 파일을 업로드하기 위해 _submit에 클릭 이벤트를 추가합니다. 버튼을 클릭합니다. 마지막으로 업로드 메소드를 호출합니다.

_submit.addEventListener(&#39;click&#39;, upload);

로그인 후 복사

이제 업로드를 계속 처리할 수 있습니다. 다음 단계가 있습니다.

선택한 파일을 확인합니다.
파일 데이터를 동적으로 생성합니다.
Pass js는 XMLHttpRequest를 생성합니다
파일 업로드

선택한 파일을 확인하세요

파일 입력 box_file에는 선택한 파일 대기열을 쿼리하는 매개변수 파일이 있습니다. 여러 매개변수를 설정하는 경우, 여러 파일을 선택할 수 있습니다. 배열의 길이가 0보다 크면 계속하고, 그렇지 않으면 직접 반환합니다.

if(_file.files.length === 0){
  return;
}

로그인 후 복사

이제 파일이 선택되었는지 확인할 수 있습니다. 파일이 있다는 것을 기억하세요. 배열의 인덱스는 0부터 시작합니다.

전송할 파일 데이터를 동적으로 생성합니다

이를 위해 FormData를 사용하고 데이터를 여기에 결합해야 합니다. 3단계에서 생성된 요청에 FormData를 보냅니다. 우리가 사용하는 추가 방법은 첫 번째 매개변수가 입력 상자의 이름 속성과 유사하고 두 번째 매개변수는 값입니다. 여기서는 값을 선택한 첫 번째 파일로 설정합니다. .

var data = new FormData();
data.append(&#39;SelectedFile&#39;, _file.files[0]);

로그인 후 복사

나중에 서버에 데이터를 보낼 때 사용하게 됩니다.

업로드 스크립트를 통해 XMLHttpRequest를 생성합니다.

이 부분은 매우 기본적이며 콜백 함수를 정의하기 위해 새로운 XMLHttpRequest，并设置一些设置。首先我们将修改onreadystatechange 값을 생성합니다. 요청 상태가 변경되면 이 메서드는 상태가 변경될 때 값이 원하는 값인지 확인하기 위해 ReadyState를 확인합니다. 이 경우에는 요청이 완료되었음을 의미하는 4입니다.

두 번째 단계에서 다음을 추가합니다. 이런 방식으로 업로드 진행률을 확인하여 진행률 표시줄을 업데이트할 수 있습니다.

var request = new XMLHttpRequest();
request.onreadystatechange = function(){
  if(request.readyState == 4){
    try {
      var resp = JSON.parse(request.response);
    } catch (e){
      var resp = {
        status: &#39;error&#39;,
        data: &#39;Unknown error occurred: [&#39; + request.responseText + &#39;]&#39;
      };
    }
    console.log(resp.status + &#39;: &#39; + resp.data);
  }
};

로그인 후 복사

요청이 성공하면 try...catch를 사용하여 반환 구문 분석 프로세스를 래핑합니다. 구문 분석이 실패하면 다음을 수행하기 위해 자체 반환 개체를 만듭니다. 코드는 반환 값을 처리하는 방법을 결정할 수 있습니다. 이제 콘솔에 출력해 보겠습니다. 진행률 표시줄 처리:

request.upload.addEventListener(&#39;progress&#39;, function(e){
  _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + &#39;%&#39;;
}, false);

로그인 후 복사

여기서는 조금 복잡합니다. 이벤트를 모니터링합니다. 이 이벤트 개체에는 우리가 더 관심을 두는 두 가지 속성이 있으며 total.loaded는 이벤트에 업로드된 값을 나타냅니다. 총계는 전송될 총 값을 나타냅니다. 진행률 표시줄을 설정하기 위해 이 두 값을 기준으로 백분율을 계산할 수 있습니다.

참고: 여기에 추가된 애니메이션 효과는 없지만 사용자 정의할 수 있습니다. 필요에 따라 애니메이션 효과를 적용합니다.

파일 업로드

이제 요청을 보낼 수 있습니다. POST를 통해 upload.php 파일이라는 파일에 요청을 보내고 매개변수 데이터와 함께 send() 메서드를 사용하여 데이터를 보낼 수 있습니다:

request.open(&#39;POST&#39;, &#39;upload.php&#39;);
request.send(data);

로그인 후 복사

전체 JavaScript 코드는 다음과 같습니다.

var _submit = document.getElementById(&#39;_submit&#39;), 
_file = document.getElementById(&#39;_file&#39;), 
_progress = document.getElementById(&#39;_progress&#39;);
var upload = function(){
  if(_file.files.length === 0){
    return;
  }
  var data = new FormData();
  data.append('SelectedFile', _file.files[0]);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if(request.readyState == 4){
      try {
        var resp = JSON.parse(request.response);
      } catch (e){
        var resp = {
          status: 'error',
          data: 'Unknown error occurred: [' + request.responseText + ']'
        };
      }
      console.log(resp.status + ': ' + resp.data);
    }
  };
  request.upload.addEventListener('progress', function(e){
    _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
  }, false);
  request.open('POST', 'upload.php');
  request.send(data);
}
_submit.addEventListener(&#39;click&#39;, upload);

로그인 후 복사

이제 PHP로...

PHP

이것은 우리가 사용하는 코드입니다. 몇 가지 차이점을 알 수 있습니다. , 주로 상위 JSON 메소드를 사용하여 값을 반환하고 JSON 형식으로 출력합니다. 이 PHP는 이전 기사의 코드와 동일합니다. 즉, 이 메소드는 500Kb보다 작은 PNG 이미지에만 적용 가능합니다. 성공 메시지는 업로드된 파일의 경로를 반환합니다:

<?php
// Output JSON
function outputJSON($msg, $status = &#39;error&#39;){
  header(&#39;Content-Type: application/json&#39;);
  die(json_encode(array(
    &#39;data&#39; => $msg,
    &#39;status&#39; => $status
  )));
}
// Check for errors
if($_FILES[&#39;SelectedFile&#39;][&#39;error&#39;] > 0){
  outputJSON(&#39;An error ocurred when uploading.&#39;);
}
if(!getimagesize($_FILES[&#39;SelectedFile&#39;][&#39;tmp_name&#39;])){
  outputJSON(&#39;Please ensure you are uploading an image.&#39;);
}
// Check filetype
if($_FILES[&#39;SelectedFile&#39;][&#39;type&#39;] != &#39;image/png&#39;){
  outputJSON(&#39;Unsupported filetype uploaded.&#39;);
}
// Check filesize
if($_FILES[&#39;SelectedFile&#39;][&#39;size&#39;] > 500000){
  outputJSON(&#39;File uploaded exceeds maximum upload size.&#39;);
}
// Check if the file exists
if(file_exists(&#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;])){
  outputJSON(&#39;File with that name already exists.&#39;);
}
// Upload file
if(!move_uploaded_file($_FILES[&#39;SelectedFile&#39;][&#39;tmp_name&#39;], &#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;])){
  outputJSON(&#39;Error uploading file - check destination is writeable.&#39;);
}
// Success!
outputJSON(&#39;File uploaded successfully to "&#39; . &#39;upload/&#39; . $_FILES[&#39;SelectedFile&#39;][&#39;name&#39;] . &#39;".&#39;, &#39;success&#39;);

로그인 후 복사

如果将所有内容都放在一起，您应该可以将文件上传到您期望的位置，并在浏览器的控制台内成功返回。

结束语

还有一些比较容易而又有效的方式来增强用户体验.通过将文件队列的多个文件加入到FormData,可以实现多文件上传. 有一点要说明,如果你是在本地做测试,你可能没办法看到进度条逐步变化,这取决于你本地机器的上传速度,我建议在服务器上使用较大的png文件做测试.