PHP AJAX多个文件，选择后自动上传

Question

I'm trying to create a upload form for audio files like soundcloud,hulkshare, ... has for uploading files.

How it works is =

1. You click the upload button.
2. You select multiple files.
3. Upon hitting ENTER or OPEN(windows) the files start uploading in alphabetic order with each of them heaving their own progress bar.
4. After a file has finished uploading you can click(sidebar changes(ajax)) it to edit/add things like
   • artist
   • title
   • tags
   • ...
5. Files will be saved with the standard data like title,artist, etc ... but if changed and clicking 'SAVE' item data will changed.

What I have so far is ...

uploads.html

<form action="/process/ajax/upload.php" method="post" class="upload" enctype="multipart/form-data">
<input type="file" name="file"  id="file" style="display:none" multiple>
<div class="main-box center-center  clearfix" id="fileupload">
<div class="center-center text-center">
<button type="submit" onClick="return false;" name="upload" onClick="selectfile" class="btn btn-success upload btn-lg">
<span class="fa fa-upload"></span>
<strong>upload</strong>
</button>
<p>Or you can DRAG & DROP </p>
</div>
</div>
</form>

upload.js

$(document).ready(function(e) {
    $('button.upload').on('click',function(){
        $('input[type=file]').click();
    });

    $('input[type=file]').change(function() {
        var res = $('div#results'); 
    $(res).show('slow');
        var values = $('input[type=file]').val();
        $.ajax({
            url: "/process/ajax/upload.php",
            type: "post",
            data: values,
        });
    });
});

upload.php

if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK)
{
    ############ Edit settings ##############
    $UploadDirectory    = '/uploads/'; //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 'image/png': 
            case 'image/gif': 
            case 'image/jpeg': 
            case 'image/pjpeg':
            case 'text/plain':
            case 'text/html': //html file
            case 'application/x-zip-compressed':
            case 'application/pdf':
            case 'application/msword':
            case 'application/vnd.ms-excel':
            case 'video/mp4':
                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 ))
       {
        // do other stuff 
               die('Success! File Uploaded.');
    }else{
        die('error uploading File!');
    }

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

This is where I'm stuck... The files should end up in the uploads(root) folder. So if someone could help me to get past the 'uploading' part, the PHP part I could figure out myself.

Answer 1

So what's the problem, the file doesn't end up on the uploads directory? Do you get any errors? Assuming your upload.php and uploads directory are on the same level, try

$DS = DIRECTORY_SEPARATOR;
$UploadDirectory = dirname(__FILE__) . $DS . 'uploads' . $DS;

Also check the write permissions for your uploads directory. If you are working locally on Windows there should be no problems. But if this is your production server and most likely Linux, use your FTP client to change the directory permissions (usually right clicking the folder and "set permissions", or similar) and enter a value of 775. That way the you will make it writable by the web server user.