jQuery Ajax 파일 업로드(php)-JS 튜토리얼-php.cn

jQuery Ajax 파일 업로드(php)

高洛峰

풀어 주다： 2017-01-06 14:41:03

원래의

1149명이 탐색했습니다.

jQuery의 Ajax 파일 업로드 구현 방법, PHP 충실한 파일 업로드.
AJAX 업로드 파일, PHP 업로드 파일.

[PHP 파일 업로드]

시작하기 전에 WEB을 통해 파일을 업로드하는 원리를 간략하게 설명할 필요가 있다고 생각합니다.
실제로 여기서 업로드된 파일을 처리하는 것이 PHP이든 JSP든 ASP이든 WEB에서는 이미 파일을 서버에 업로드했습니다. 우리는 업로드된 파일을 처리하기 위해 업로드 처리 기능을 사용합니다.
처리 기능은 일반적으로 PHP, JSP, ASP 등 서버측 언어를 사용하여 구현됩니다. 그러면 웹을 통해 파일을 업로드하는 방법(HTTP 프로토콜?) 다음과 유사한 HTML 코드가 필요합니다:
test.html

<form action="do_file_upload.php" method="post" enctype="multipart/form-data">
<p>Pictures:
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>

로그인 후 복사

참고: enctype="multipart/form-data", yes 필수 , 이는 파일 업로드 유형임을 FORM 테이블에 알려줍니다. 요청이 성공하면 파일이 서버의 임시 폴더에 업로드됩니다.
파일이 대상에 도달한 후 어떻게 처리되는지는 다음과 같습니다. 단지 PHP, JSP, ASP의 문제일 뿐입니다.
(단, 너무 서두르지 마세요. 파일을 다른 곳으로 이동하거나 이름을 바꾸지 않으면 양식 요청이 끝나면 파일이 삭제됩니다. 따라서 업로드를 처리할 스크립트를 작성해야 합니다. 파일)
여기에서는 PHP를 사용하여
do_file_upload.php

<?php
$error = ""; //上传文件出错信息
$msg = "";
$fileElementName = &#39;picture&#39;;
    $allowType = array(".jpg",".gif",".png"); //允许上传的文件类型
    $num      = strrpos($_FILES[&#39;picture&#39;][&#39;name&#39;] ,&#39;.&#39;);  
$fileSuffixName    = substr($_FILES[&#39;picture&#39;][&#39;name&#39;],$num,8);//此数可变  
$fileSuffixName    = strtolower($fileSuffixName); //确定上传文件的类型

$upFilePath             = &#39;d:/&#39;; //最终存放路径
if(!empty($_FILES[$fileElementName][&#39;error&#39;]))
{
   switch($_FILES[$fileElementName][&#39;error&#39;])
   {
    case &#39;1&#39;:
     $error = &#39;传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值&#39;;
     break;
    case &#39;2&#39;:
     $error = &#39;上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值&#39;;
     break;
    case &#39;3&#39;:
     $error = &#39;文件只有部分被上传&#39;;
     break;
    case &#39;4&#39;:
     $error = &#39;没有文件被上传&#39;;
     break;
    case &#39;6&#39;:
     $error = &#39;找不到临时文件夹&#39;;
     break;
    case &#39;7&#39;:
     $error = &#39;文件写入失败&#39;;
     break;
    default:
     $error = &#39;未知错误&#39;;
   }
}elseif(empty($_FILES[&#39;fileToUpload&#39;][&#39;tmp_name&#39;]) || $_FILES[&#39;fileToUpload&#39;][&#39;tmp_name&#39;] == &#39;none&#39;)
{
   $error = &#39;没有上传文件.&#39;;
}else if(!in_array($fileSuffixName,$allowType))
{
   $error = &#39;不允许上传的文件类型&#39;; 
}else{
  );
   if($ok === FALSE){
    $error = &#39;上传失败&#39;;
   }
}
?>

로그인 후 복사

다른 참고 사항: $_FILES 배열 정보

이 배열에는 업로드된 모든 파일 정보가 포함됩니다. , 파일 업로드 시 기록된 정보입니다.
위 예시의 $_FILES 배열 내용은 다음과 같습니다. 위의 예와 같이 파일 업로드 필드의 이름이 userfile이라고 가정해 보겠습니다. 이름은 원하는 대로 지정할 수 있습니다.

$_FILES['userfile']['name']
클라이언트 컴퓨터 파일의 원래 이름입니다.

$_FILES['userfile']['type']
브라우저가 이 정보를 제공하는 경우 파일의 MIME 유형입니다. 예를 들면 "이미지/gif"입니다. 그러나 이 MIME 유형은 PHP 측에서 확인되지 않으므로 이를 당연하게 여기지 마십시오.

$_FILES['userfile']['size']
업로드된 파일의 크기(바이트)입니다.

$_FILES['userfile']['tmp_name']
파일 업로드 후 서버에 저장되는 임시 파일 이름입니다.

$_FILES['userfile']['error']
파일 업로드 관련 오류 코드입니다. 이 프로젝트는 PHP 버전 4.2.0에 추가되었습니다.

[AJAX 파일 업로드]

사실 새로 고침 없는 파일 업로드를 달성하기 위한 것입니다. IFRAME 파일 업로드 원칙을 사용할 수 있습니다.
실제로 PHP로 파일을 업로드할 때. . . $_FILES 형식만 사용할 수 있지만 JS를 사용하여 ..document.getElementById('img').value와 같은 ID를 가져오는 경우 또는 양식의 jquery $("#img")는 실제로 업로드할 수 없습니다(그러나 처음에 저를 포함하여 여전히 많은 사람들이 이 작업을 수행하고 있습니다).
그런데 이 기능을 사용하려면 소위 "비동기 업로드" 구현도 필요합니다. 어떻게 해야 하나요? ? 타사 구성 요소만 사용하거나 직접 작성할 수 있습니다(웹 페이지에 IFRAME 포함). 그러나 개발 시간을 고려하고 있다면 제3자를 사용할 수 있습니다. 여기에 "ajaxfileupload.js"라는 좋은 jQuery Ajax 파일 업로드 구성 요소가 있습니다. 해당 구성 요소 다운로드 주소는 http://www.phpletter.com/입니다. 다운로드 후 내부에 PHP 애플리케이션 데모가 있어 이해하기 쉽습니다.
프로세스:
(1) 프런트 엔드 파일의 코드: test.php

    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="ajaxfileupload.js"></script>
    <script type="text/javascript">
       function ajaxFileUpload()
               {
                  $.ajaxFileUpload
                     (
                       {
                            url:&#39;doajaxfileupload.php&#39;, //你处理上传文件的服务端
                            secureuri:false,
                            fileElementId:&#39;img&#39;,
                            dataType: &#39;json&#39;,
                            success: function (data)
                                  {
                                    alert(data.file_infor);
                                  }
                               }
                         )
                       return false;
                 } 
     </script>

로그인 후 복사

해당 HTML은 다음과 같습니다.

        <input id="img" type="file" size="45" name="img" class="input">
        <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

로그인 후 복사

이런 식으로 , 클라이언트가 완료되었습니다.

(2) 서버측 doajaxfileupload.php

실제로 값이 전달되었는지 쉽게 확인하기 위해 저장할 수 있습니다.
이제 친숙한 정보가 나옵니다.

물론 실제 처리는 다음과 유사합니다.

     array(
             &#39;name&#39;=>&#39;lamp.jpg&#39;,
             &#39;type&#39;=>&#39;image/pjpeg&#39;,
             &#39;tmp_name&#39;=>&#39;c:\windows\temp\phpFA.tmp&#39;,
             &#39;error&#39;=>0,
             &#39;size&#39;=>3127
         )

로그인 후 복사

또 다른 참고 사항: 실제로 IFRAME을 삽입할 수 있습니다. 그런 다음 기본 POST 양식을 사용하여 IFRAME에 제출합니다. JQUERY 플러그인도 이 방법을 사용합니다. 단지 동적으로 생성된 IFRAME과 폼

   <?php
     $upFilePath = "d:/";
     );
   if($ok === FALSE){
    echo json_encode(&#39;file_infor&#39;=>&#39;上传失败&#39;);
   }else{
    echo json_encode(&#39;file_infor&#39;=>&#39;上传成功&#39;);
   }
   ?>

로그인 후 복사

일 뿐입니다. 더 많은 jQuery Ajax 파일 업로드(php) 관련 글은 PHP 중국어 홈페이지를 주목해주세요!