HTML5 AJAX文件上传器,进度条错误php

时间:2012-07-16 15:26:44

标签: php jquery ajax html5 upload

我从这里制作了一个剧本,但现在我遇到了制作问题$ _POST ['file']

她是crsipt

的index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<style>
progress
{
    background-color:#FF0000;
    width:250px;
    min-height:2px;
    height:4px;
    border:none;
}
progress::-webkit-progress-bar-value, progress::-webkit-progress-value, progress::-moz-progress-bar, progress::progress-bar
{
    background-color:#0F0;
}
</style>
</head>

<body>
<form enctype="multipart/form-data" method="post">
    <input name="file" type="file" id="file" />
    <input type="button" value="Upload" />
</form>
<div id="prc"></div>%<br>
<progress value="0" min="0" max="100"></progress>
<div id="det"></div>
</body>
</html>

ajax.js

// JavaScript Document
$(function(){
    $(':file').change(function(){
        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;
        $("#det").html("NAME: "+name+"<br/>SIZE: "+size+"<br/>TYPE: "+type);
        //your validation
    });

    $(':button').click(function(){
        var formData = new FormData($('form')[0]);
        $("#data").html(formData);
        $.ajax({
            url: 'upload.php',  //server script to process data
            type: 'POST',
            xhr: function() {  // custom xhr
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            //Ajax events
            //beforeSend: beforeSendHandler,
            success: function(html) {
                $("#mess").html(html);
            },
            error:function(html) {
                $("#mess").html(html);
            },
            enctype: 'multipart/form-data',
            // Form data
            data: formData,
            //Options to tell JQuery not to process data or worry about content-type
            cache: false,
            contentType: false,
            processData: false
        });
    });
    function progressHandlingFunction(e){
        if(e.lengthComputable){
            $('progress').attr({value:e.loaded,max:e.total});
            $('#prc').html(e.loaded);
        }
    }
});
在设置错误时

和“upload.php”脚本

<?php
if(isset($_POST['file'])){
    echo $_POST['file'];
}else{
    echo 'file is not set';
}
?>

resoults

NAME: ALISON LIMERICK - Where love lives.mp3
SIZE: 16584832
TYPE: audio/mp3

> file is not set

progresbarr运行良好,但在php中出错了

有人帮助我吗?

1 个答案:

答案 0 :(得分:1)

在处理使用Post上传的文件时,您需要使用$_FILES。您可以找到有关$_FILES here

的信息

可以在此link

找到有关处理文件上传的更多信息