非常好用的jquery ajax文件上传插件

官方网站：http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

文件下载：点击这里

把下载好的文件解压后里面有ajaxfileupload.php这个文件是演示的，大家可以看看。

其中要使用ajax上传必要的引入文件有：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>

css文件无所谓。

在html中写入一个文件上传input和一个上传按钮

<input  type="file" size="45" name="fileToUpload">
<button class="button"  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 . "',\n";
    echo                "msg: '" . $msg . "'\n";
    echo "}";
?>

特别值得注意的是这个插件在php上传处理文件中如果错误信息是中文的很容易出现乱码的情况，所以在php文件中要加上这句话就没有问题了：

header("Content-type: text/html; charset=utf-8");