집 >php教程 >PHP开发 >AjaxFileUpload는 비동기식 파일 업로드를 구현합니다(AjaxFileUpload.js 파일 다운로드 및 매개변수 소개).

AjaxFileUpload는 비동기식 파일 업로드를 구현합니다(AjaxFileUpload.js 파일 다운로드 및 매개변수 소개).

高洛峰원래의: 2016-12-12 17:38:151395검색

AjaxFileUpload는 더 나은 비동기식 파일 업로드를 달성하고 사용이 간단합니다.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="ajaxfileupload.js"></script>
    </head>
<script>
jQuery(function(){   
  $("#buttonUpload").click(function(){     
     //加载图标   
     /* $("#loading").ajaxStart(function(){
        $(this).show();
     }).ajaxComplete(function(){
        $(this).hide();
     });*/
      //上传文件
    $.ajaxFileUpload({
        url:&#39;upload.php&#39;,//处理图片脚本
        secureuri :false,
        fileElementId :&#39;fileToUpload&#39;,//file控件id
        dataType : &#39;json&#39;,
        success : function (data, status){
            if(typeof(data.error) != &#39;undefined&#39;){
                if(data.error != &#39;&#39;){
                    alert(data.error);
                }else{
                    alert(data.msg);
                }
            }
        },
        error: function(data, status, e){
            alert(e);
        }
})
return false;
  }) 
})
</script>
    <body>
        <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
        <button id="buttonUpload">上传</button>
    </body>
</html>

업로드는 매개변수도 전달할 수 있습니다.

var data = { name: &#39;my name&#39;, description: &#39;short description&#39; } 
    $.ajaxFileUpload({
        url: &#39;upload.php&#39;,
        secureuri: false,
        data: data,
        fileElementId: &#39;fileToUpload&#39;,
        dataType: &#39;json&#39;,
        success: function (data) {
            alert(data.msg);
 
        },
        error: function (data) {
            alert("error");
        }
    });

주요 매개변수 설명:
1, URL 표현 파일 업로드 작업의 파일 경로를 처리합니다. 위와 같이 브라우저에서 URL에 직접 액세스할 수 있는지 테스트할 수 있습니다. upload.php
2, fileElementId는 위와 같이 파일 도메인 ID를 나타냅니다. fileToUpload
3 , secureuri가 보안 제출을 활성화하는지 여부, 기본값은 false입니다
4, dataType 데이터, 일반적으로 javascript의 원래 생태인 json을 선택합니다
5, 제출 성공 후 처리 기능
6, 오류 제출 실패 처리 기능

해당 오류 메시지를 알아야 합니다

1, 구문 오류: 누락; 앞에 문 오류
이 오류가 발생하면 URL 경로에 액세스할 수 있는지 확인해야 합니다

2, SyntaxError: 구문 오류
이 오류가 발생하면 제출 작업을 처리하는 PHP 파일에 구문 오류가 있는지 확인해야 합니다

3, SyntaxError: 잘못된 속성 ID 오류
이 오류가 발생하면 속성 ID가 존재하는지 확인해야 합니다

4. XML 표현식 오류에서 구문 오류: 누락 }
이 오류가 발생하면 파일 도메인 이름이 있는지 확인해야 합니다. 일치하거나 존재하지 않습니다

5. 기타 사용자 정의 오류
$error 변수를 직접 사용할 수 있습니다. 각 매개변수가 올바른지 확인하는 인쇄 방법은 위의 잘못된 오류 메시지보다 훨씬 편리합니다.

성명：

이전 기사：ajaxFileUpload 비동기 파일 업로드 사용이 간편함다음 기사：ajaxFileUpload 비동기 파일 업로드 사용이 간편함

AjaxFileUpload는 비동기식 파일 업로드를 구현합니다(AjaxFileUpload.js 파일 다운로드 및 매개변수 소개).

관련 기사