非常に使いやすいjquery ajaxファイルのアップロードプラグイン

13563 ワード

公式サイト:http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 
ファイルのダウンロード:ここをクリックしてください.
ダウンロードしたファイルを解凍した後、ajaxfileuplad.phpというファイルがプレゼンテーションされていますので、ご覧ください.
その中でajaxを使ってアップロードするには必要な導入ファイルがあります.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
cssファイルは構いません.
ファイルアップロードのinputとアップロードのボタンを書き込みます.
<input id="fileToUpload" type="file" size="45" name="fileToUpload">
<button class="button" id="buttonUpload" onClick="return ajaxFileUpload();">  </button>
アップロードボタンをクリックした時にajaxFileUpload()関数を実行しますので、この関数の具体的な内容を追加します.
<script type="text/javascript">
    function ajaxFileUpload()
    {
        $("#loading")//               (       )
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });

        $.ajaxFileUpload
        (
            {
                url:'doajaxfileupload.php',//          php    
                secureuri:false,
                fileElementId:'fileToUpload',//        input  id
                dataType: 'json',
                data:{name:'logan', id:'id'},
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);//         
                        }else
                        {
                            alert(data.msg);//            
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )
        
        return false;

    }
</script>    
doajaxfileupload.php                

<?php
    $error = "";
    $msg = "";
    $fileElementName = 'fileToUpload';//      input    (name  )
    if(!empty($_FILES[$fileElementName]['error']))
    {
        switch($_FILES[$fileElementName]['error'])//         
        {

            case '1':
                $error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
                break;
            case '2':
                $error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
                break;
            case '3':
                $error = 'The uploaded file was only partially uploaded';
                break;
            case '4':
                $error = 'No file was uploaded.';
                break;

            case '6':
                $error = 'Missing a temporary folder';
                break;
            case '7':
                $error = 'Failed to write file to disk';
                break;
            case '8':
                $error = 'File upload stopped by extension';
                break;
            case '999':
            default:
                $error = 'No error code avaiable';
        }
    }elseif(empty($_FILES[$fileElementName]['tmp_name']) || $_FILES[$fileElementName]['tmp_name'] == 'none')
    {
        $error = 'No file was uploaded..';
    }else 
    {
            $msg .= " File Name: " . $_FILES[$fileElementName]['name'] . ", ";
            $msg .= " File Size: " . @filesize($_FILES[$fileElementName]['tmp_name']);
//                 ,                  ,       ,      ,     $error      
            @unlink($_FILES[$fileElementName]);        
    }        
    echo "{";
    echo                "error: '" . $error . "',
"; echo "msg: '" . $msg . "'
"; echo "}"; ?>
特に注意すべきなのは、このプラグインはphpアップロード処理ファイルの中にエラー情報が中国語であると文字化けが発生しやすいので、phpファイルにこの文を追加すれば大丈夫です.
header("Content-type: text/html; charset=utf-8");