2014-10-08 34 views
0

我的目標是建立一個網站,我可以將多個文件上傳到我的網絡服務器。 這是我的我的HTML表單:我在使用PHP製作多文件上傳器時遇到了一些麻煩

<form class='form-horizontal'> 
    <div class='form-group text-center'> 
    <h3>Upload</h3> 
    </div> 
    <div class='form-group'> 
    <label for='file' class='col-sm-3 control-label'>File(s)</label> 
    <div class='col-sm-9'> 
     <input type="file" id='files' class="form-control text-center" multiple /> 
    </div> 
    <div class='col-sm-12'> 
     <br> 
     <button type="button" id='submit' class="btn btn-success center-block glyphicon glyphicon-cloud-upload btn-lg" value='Upload' /> 
    </div> 
    </div> 
</form> 

那麼這裏就是我的javascript:在

$(document).ready(function(){ 
    var files = []; 
    $("#files").bind('change', function() { 
     files = this.files 
    }); 
    $("#submit").click(function(){ 
     //Validate first 
     if(files.length > 0){ 
      var data = { 
       files: files 
      }; 
      $.ajax({ 
       type: "POST", 
       url: "<?php echo BASE_URL; ?>/FileUploader/php/uploadFiles.php", 
       data: data, 
       success: function(response){ 
        console.log(response); 
        //$("#files").val(""); 
       } 
      }); 
     } 
    }); 
}); 

當我把我的Ajax請求,我在控制檯得到一個錯誤:「非法調用遺漏的類型錯誤」 jquery.min.js文件

有誰知道如何解決這個問題?

+0

你不能通過標準的ajax調用來上傳文件。 – 2014-10-08 19:35:19

回答

1

去年夏天我從零開始使用PHP,Javascript和AJAX。它將適用於圖像,音頻,視頻,txt文件。 要查看完整的代碼去https://github.com/akshaynagpal/multi_type_upload

HTML

<body> 
<h1>Media Upload</h1> 
<form name="upload_form" id="upload_form" method="POST" enctype="multipart/form-data"> 

Select Image: <input type="file" id="uploadimage" name="uploadimage" /><br /> 
<input type="button" value="Upload Image" name="uploadButton" onclick="showProgressBar();"/>Format allowed:"jpg" "gif", "png" only.<br /> 
<div id="progressDiv" style="display:none"> 
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> 
    </div> 
    <h3 id="status"></h3> 
    <p id="loaded_n_total"></p> 

Select Video: <input type="file" id="uploadvideo" name="upload_video" /><br /> 
<input type="button" value="Upload Video" name="uploadButton" onclick="showProgressBar2();"/>Format allowed:"mp4" only.<br /> 
<div id="progressDiv2" style="display:none"> 
    <progress id="progressBar2" name="progressbar2" value="0" max="100" style="width:300px;"></progress> 
    </div> 
    <h3 id="status2"></h3> 
    <p id="loaded_n_total2"></p> 

</form> 
</body> 

PHP

$fileName = $_FILES["uploadimage"]["name"]; // The file name 
      $fileTmpLoc = $_FILES["uploadimage"]["tmp_name"]; // File in the PHP tmp folder 
      $fileType = $_FILES["uploadimage"]["type"]; // The type of file it is 
      $fileSize = $_FILES["uploadimage"]["size"]; // File size in bytes 
      $fileErrorMsg = $_FILES["uploadimage"]["error"]; // 0 for false... and 1 for true 

PHP和JavaScript代碼是有點長,所以你可以訪問上述 GitHub的鏈接閱讀他們。

相關問題