2014-10-08 4 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, я получаю сообщение об ошибке в консоли: «неперехваченным TypeError: Illegal вызов» в файл jquery.min.js

Кто-нибудь знает, как это исправить?

+0

вы не можете загружать файлы через стандартные вызовы ajax. –

ответ

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 выше читать их.

Смежные вопросы