Ajax Codular를 사용하여 파일 업로드를 위한 진행률 표시줄을 구현하는 방법

이번에는 Ajax에서 파일 업로드를 위한 진행 표시줄로 Codular를 구현하는 방법을 보여 드리겠습니다. Ajax에서 파일 업로드를 위한 진행 표시줄로 Codular를 구현하는 방법은 다음과 같습니다. . 요즘 사람들은 웹페이지를 떠나지 않고 웹페이지를 탐색하면서 다른 작업을 수행하는 것을 좋아하는데, 이는 대개 ajax를 통해 달성되지만 브라우저의 발전으로 사람들은 그렇게 하지 않습니다. 여기서는 페이지를 떠나지 않고

파일

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

Let's Code

만 지원합니다. HTML 구조로 시작한 다음 JavaScript, PHP 코드를 제공합니다. 이 부분은 이전 튜토리얼에서 적용한 것입니다. PHP 코드에 너무 많은 설명이 필요하지 않습니다.

HTML

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

아래와 같이

nbsp;html>


  <meta>
  <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>


  <p>
    </p><p>
      Select File: <input> <input>
    </p>
    <p>
      </p><p></p>
    
  
  <script></script>

약간 진행률 표시줄 스타일을 작성하고 하단에 스크립트 파일을 추가하여

파일을 처리

업로드하고 진행률 표시줄을 표시하는 것을 볼 수 있습니다.

JavaScript

먼저, 우리가 사용할 태그로 이동해야 합니다. 태그에는 ID가 표시되어 있습니다.

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');

다음으로 _submit에 클릭 이벤트를 추가하여 선택한 파일을 업로드합니다. 버튼을 클릭하면 호출되도록 합니다. 업로드 방법

_submit.addEventListener('click', upload);

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

선택한 파일을 확인합니다
전송할 파일 데이터를 동적으로 생성합니다.
js를 통해 XMLHttpRequest 생성
파일 업로드

선택한 파일 확인

파일 입력 상자 _file에는 선택한 파일 대기열을 쿼리하는 매개 변수 파일이 있습니다. 여러 매개 변수를 설정하면 여러 파일을 선택할 수 있습니다. 간단한 확인 및 판단을 수행하여 배열 길이가 0보다 크면 계속하고, 그렇지 않으면 직접 반환합니다.

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

이제 파일이 선택되었는지 확인할 수 있습니다. 파일의 경우 배열의 인덱스는 0으로 시작한다는 점을 기억하세요.

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

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

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

나중에 서버로 데이터를 보낼 때 사용하겠습니다.

업로드 스크립트를 통해 XMLHttpRequest 생성

이 부분은 매우 기본적이며, 요청 상태가 변경되면 콜백 함수

를 정의하기 위해 새로운

값을 생성합니다. . 이 메소드는 상태가 변경될 때 ReadyState를 확인하고 값이 원하는 것인지 확인합니다. 이 경우에는 요청이 완료되었음을 의미하는 4입니다. XMLHttpRequest，并设置一些设置。首先我们将修改onreadystatechange 두 번째 단계에서는 업로드에 진행 이벤트를 추가합니다. 이 방법으로 진행률 표시줄을 업데이트하기 위해 업로드 진행률을 얻을 수 있습니다.

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);
  }
};

요청이 성공하면 try...catch를 사용하여 반환 값을 구문 분석하는 프로세스를 래핑합니다. 후속 코드가 오류를 보고하지 않도록 자체 반환 개체를 사용하여 반환 값을 처리하는 방법을 결정할 수 있습니다. 여기서는 이를 콘솔에 출력합니다.

이제 진행률 표시줄을 처리합니다.

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

这里有一点点复杂,我们监听一个事件,该事件对象有两个我们比较关注的属性,loaded和total.loaded表示已经上传到服务器端的数值,total表示要发送的总数值,我们可以根据这两个值计算一个百分比,来设置进度条的宽度.

Note: 这里没有加入任何动画特效,但你可以根据需要自定义动画效果.

上传文件

现在我们可以发送请求，我们将通过POST请求到一个名为upload.php的文件，并使用send（）方法，参数为data，这样我们就可以发送数据:

request.open('POST', 'upload.php');
request.send(data);

下面给出完整的JavaScript代码:

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');
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('click', 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,
    'status' => $status
  )));
}
// Check for errors
if($_FILES['SelectedFile']['error'] > 0){
  outputJSON('An error ocurred when uploading.');
}
if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){
  outputJSON('Please ensure you are uploading an image.');
}
// Check filetype
if($_FILES['SelectedFile']['type'] != 'image/png'){
  outputJSON('Unsupported filetype uploaded.');
}
// Check filesize
if($_FILES['SelectedFile']['size'] > 500000){
  outputJSON('File uploaded exceeds maximum upload size.');
}
// Check if the file exists
if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){
  outputJSON('File with that name already exists.');
}
// Upload file
if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){
  outputJSON('Error uploading file - check destination is writeable.');
}
// Success!
outputJSON('File uploaded successfully to "' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');

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

结束语

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ajax的三级联动菜单栏如何实现

ajax数据处理步骤详解（附代码）

위 내용은 Ajax Codular를 사용하여 파일 업로드를 위한 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!