2016-10-15 67 views
10

我写了这个使用HTML中的input元素将图像上传到我的本地Apache网络服务器。 file被记录为非空,但为什么form_data完全空?FormData附加不起作用

$('#upload-image').change(function(e){ 
    var file = e.target.files[0]; 
    var imageType = /image.*/; 
    if (!file.type.match(imageType)) 
     return; 
    console.log(file); 
    var form_data = new FormData(); 
    form_data.append('file', file); 
    console.log(form_data); 
    $.ajax({ 
     url: 'http://localhost/upload.php', 
     cache: false, 
     contentType: false, 
     processData: false, 
     data: form_data, 
     type: 'POST', 
     success: function(response){ 
      console.log(response); 
     }, 
     error: function(error){ 
      console.log(error); 
     } 
    }); 

}); 

这是本地网络服务器我upload.php

<?php 
    header('Access-Control-Allow-Origin: *'); 
    if (0 < $_FILES['file']['error']) { 
     echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
    } 
    else { 
     move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); 
     $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name']; 
     echo $target_path; 
    } 
?> 

console.log(response)记录所有PHP文件的代码行,而不是echo

+0

你试过在url中使用'upload.php'吗?查看绝对路径并不常见,更不用说本地主机了,请记住,AJAX调用取决于JavaScript文件所在的位置,例如,如果您的根目录中有一个名为“phpFiles/upload.php”的文件夹,那么应该放在网址中。 – Leo

+0

console.log(form_data);你在这里得到什么? –

+0

你期待看到什么?你不能真正地记录一个formData对象,所以它应该是空的,即使该文件在那里。如果收到文件,你检查了服务器吗? – adeneo

回答

15

返回的结果在登录时,只需FORMDATA对象console.log(formData)它总是返回空白,因为您无法记录formData。

如果你只是在发送前记录它,你可以使用entries()获得在FORMDATA条目对象

$('#upload-image').change(function(e) { 
    var file = e.target.files[0]; 
    var imageType = /image.*/; 

    if (!file.type.match(imageType)) return; 

    var form_data = new FormData(); 
    form_data.append('file', file); 

    for (var key of form_data.entries()) { 
     console.log(key[0] + ', ' + key[1]); 
    } 

    $.ajax({ 
     url: 'http://localhost/upload.php', 
     cache: false, 
     contentType: false, 
     processData: false, 
     data: form_data, 
     type: 'POST', 
     success: function(response) { 
      console.log(response); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 

}); 
+0

它什么时候会存储在网络服务器上?我找不到'uploads'的位置 – necroface

+0

我认为它是'/ var/www/html',但我在那里看不到'uploads' – necroface

-1

我注意到自己的contentType: false将只对jQuery的1.7.0工作以上。所以请确保您使用的是正确的jQuery版本。