Ajax文件上传器,当提交表单时出现空白页面

时间:2014-02-05 15:01:08

标签: javascript php sql ajax

我正在使用一个文件上传器,利用Ajax和PHP上传“PDF”类型的文件。文件不能超过5MB。但是,在我提交表单后,会出现一个空白页面,在地址栏中,该页面被称为“processuploads.php”。我有一个名为“processuploads.php”的文件,里面有以下代码。

编辑:我的错误消息现在声明死亡('上传有问题!是“upload_max_filesize”设置正确吗?');

<?php
   if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK)
{
   ############ Edit settings ##############
   $UploadDirectory = 'C:\xampp\htdocs\ReportBazaar\reports'; //specify upload    directory ends with / (slash)
   ##########################################

   /*
   Note : You will run into errors or blank page if "memory_limit" or "upload_max_filesize" is set to low in "php.ini". 
   Open "php.ini" file, and search for "memory_limit" or "upload_max_filesize" limit 
   and set them adequately, also check "post_max_size".
   */

   //check if this is an ajax request
   if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
       die();
    }


   //Is file size is less than allowed size.
   if ($_FILES["FileInput"]["size"] > 5242880) {
    die("File size is too big!");
    }

    //allowed file type Server side check
     switch(strtolower($_FILES['FileInput']['type']))
    {
       //allowed file types
         case 'application/pdf':
        break;
        default:
        die('Unsupported File!'); //output error
      }

      $File_Name          = strtolower($_FILES['FileInput']['name']);
      $File_Ext           = substr($File_Name, strrpos($File_Name, '.')); //get file extention
      $Random_Number      = rand(0, 9999999999); //Random number to be added to name.
      $NewFileName      = $Random_Number.$File_Ext; //new file name

        if(move_uploaded_file($_FILES['FileInput']['tmp_name'], $UploadDirectory.$NewFileName ))
         {
        die('Success! File Uploaded.');
         }else{
        die('error uploading File!');
         }

             }
              else
             {
          die('Something wrong with upload! Is "upload_max_filesize" set correctly?');
             }
?>

以下代码位于我的“uploadreports.php”文件中,这是ajax所在的位置以及要提交的表单。

<?php require "header.php"; 

if(check_login()) {

 } else {
   header('Location: login.php');
    exit;
  }

  function check_login () {
      if(isset($_SESSION['sess_uid']) && $_SESSION['sess_uid'] != '') {
      return true;
      } else {
        false;
   }
}
?>  

 <script type="text/javascript">
     $(document).ready(function() { 
        var options = { 
        target:   '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  beforeSubmit,  // pre-submit callback 
        success:       afterSuccess,  // post-submit callback 
        uploadProgress: OnProgress, //upload progress callback 
        resetForm: true        // reset the form after successful submit 
        }; 

 $('#MyUploadForm').submit(function() { 
 $(this).ajaxSubmit(options);           
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 


//function after succesful file upload (when server response)
function afterSuccess() {
$('#submit-btn').show(); //hide submit button
$('#loading-img').hide(); //hide submit button
$('#progressbox').delay( 1000 ).fadeOut(); //hide progress bar
}

//function to check file size before uploading.
function beforeSubmit(){
    //check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{

    if( !$('#FileInput').val()) //check empty input filed
    {
        $("#output").html("Are you kidding me?");
        return false
    }

    var fsize = $('#FileInput')[0].files[0].size; //get file size
    var ftype = $('#FileInput')[0].files[0].type; // get file type


    //allow file types 
    switch(ftype)
    {
        case 'application/pdf':
            break;
        default:
            $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
            return false
    }

    //Allowed file size is less than 5 MB (1048576)
    if(fsize>5242880) 
    {
        $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big file! <br />File is too big, it should be less than 5 MB.");
        return false
    }

    $('#submit-btn').hide(); //hide submit button
    $('#loading-img').show(); //hide submit button
    $("#output").html("");  
}
else
{
    //Output error to older unsupported browsers that doesn't support HTML5 File API
    $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
    return false;
}
}

//progress bar function
function OnProgress(event, position, total, percentComplete)
{
   //Progress bar
$('#progressbox').show();
$('#progressbar').width(percentComplete + '%') //update progressbar percent complete
$('#statustxt').html(percentComplete + '%'); //update status text
if(percentComplete>50)
    {
        $('#statustxt').css('color','#000'); //change status text to white after 50%
    }
}

//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
} 

}); 

</script>


<div id="pagewrap">
<div id="content">
    <!-- /#sidebar -->

    <article class="post clearfix">

        <header id="titleindex">
            <h1 class="post-title">Upload Your PDF Reports</a></h1>
        </header>
            <form enctype="multipart/form-data" id="MyUploadForm" name="MyUploadForm" action="processuploads.php" method="post">
            <p>
                <label for="title"><strong>Title: </strong></label>
            </p>
            <p>
                <input type="text" name="title" size="40"/>
            </p>
            <p>
                <label for="description"><strong>Description: </strong></label> 
            </p>
            <p> 
                <textarea name="description" rows="6" cols="40" id="textareaupload"></textarea>
            </p>
            <p>
                <label for="filepath"><strong>Filepath: </strong></label> 
            </p>
            <p>
                <input id="FileInput" name="FileInput" type="file" title="Choose the reports file path" />
            </p>
             <div id="progressbox" ><div id="progressbar"></div ><div id="statustxt">0%</div></div>
             <div id="output"></div>
            <br/>
             <input type="submit"  id="submit-btn" value="Upload" />
             <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
            </form>


    </article>
</div>

0 个答案:

没有答案