2014-12-07 75 views
0

我试图建立一个允许在PHP中上传文件的应用程序。上传文件时,应将下载链接附加到特定的div。我正在使用ajax调用来运行php脚本,这样我就可以将文件下载链接回显,而不会陷入到php页面中。 (我希望是有道理的。)

下面是HTML:

<form action="php/upload.php" method="POST" enctype="multipart/form-data" id="uploadform"> 
       Select file to upload: 
       <input type="file" name="fileToUpload" id="file"> 
       <input id="create" type="submit" value="Upload File"> 
</form> 

这里是外部JavaScript/jQuery的,使AJAX调用:

$(function() { 
    $('form').on('submit', function (e) { 
      //prevents reloading of page 
      e.preventDefault(); 
      //get file data 
      var file_data = $("#file").prop("files")[0]; 
      var form_data = new FormData(); 
      form_data.append('file', file_data); 
      //run upload.php script and append result to draggable block 
      $.ajax({ 
      type: 'post', 
      url: 'php/upload.php', 
      cache: false, 
      data: form_data, 
      success: function (data) { 
       $("#draggable"+i).append(data); 
       i++; 
      } 
      }); 

     }); 
}); 

这里是外部PHP脚本应该上传的文件:

<?php 

    $target_path = "../uploads/"; 
    $target_path = $target_path . basename($_FILES[ 'fileToUpload' ][ 'name' ]); 

    if (move_uploaded_file($_FILES[ 'fileToUpload' ][ 'tmp_name' ] , $target_path)){ 
     //echo '<a href=' . $target_path . ' download>Download</a>'; 
    } 
    else { 
     echo $target_path; 
     //var_dump($_FILES); 
    } 

我得到以下错误:Uncaught TypeError:非法调用

问题来自于尝试在ajax调用中传递'form_data'。我试图这样做,因为$ _FILES数组一旦运行了php脚本就会变空。我需要一种方法来确保我上传的文件存储在该数组中。

+0

可能重复http://stackoverflow.com/questions/20818854/upload-image-with-ajax-and -php) – Forien 2014-12-07 00:49:17

回答

3

自己解决。需要几件事情添加到Ajax调用:

$.ajax({ 
      type: 'post', 
      url: 'php/upload.php', 
      cache: false, 
      ** contentType: false, ** 
      ** processData: false, ** 
      data: new FormData(this), 
      success: function (data) { 
       $("#draggable"+i).append(data); 
       i++; 
([使用Ajax和PHP上传图片]的