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

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.

查看全部
douxianwu2221
douxianwu2221
2014/08/24 19:46
  • file-upload
  • php
  • ajax
  • javascript
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

1个回复