如何使用$ .ajax（）來上傳文件

當我嘗試使用$ _FILES獲取圖像名稱時收到此消息。

通知：未定義指數：圖像中C：\ XAMPP \ htdocs中\ upload_form \ upload_query.php上線

我有關於上傳信息表單圖像到MySQL數據庫（phpmyadmin），然後使用JavaScript清除表單，以便用戶可以上傳其他圖像和信息。我讀過，你不能使用$ _FILES以及JavaScript，但我不確定爲什麼，我也很感激解決方案。

我是新來的PHP和JavaScript。

這是JavaScript。

$('form').on('submit',function() { 
var that= $(this), 
    url = that.attr('action'), 
    type = that.attr('method'), 
    data = {}; 

    that.find('[name]').each(function(index,value) { 
      var that = $(this), 
      name = that.attr('name'), 
      value = that.val(); 

      data[name] = value; 
    }); 

$.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function(response){ 
        console.log(response); 
     } 
}); 
    document.getElementById("upload_form").reset(); 
return false; 
});

這是php。

//image properties 
$name = $_FILES['image']['name']; 
$size = $_FILES['image']['size']; 
$temp = $_FILES['image']['tmp_name']; 
$error = $_FILES['image']['error']; 
$type = $_FILES['image']['type']; 
//****************

這是表格的一部分。

<form action='upload_query.php' class='appnitro' enctype='multipart/form-data' id='upload_form' method='post' name='upload_form'> 
    <ul> 
    <li id='li_1'> 
     <label class='description' for='image'>Upload a Picture</label>  
     <div> 
     <input class='element file' id='image' name='image' required="" type='file'> 
     </div> 
    </li>  
    <li id='li_2'><label class='description' for='name'>Name</label> <span><input class='element text' id='first_name' maxlength='255' name='first_name' placeholder='First Name.' required="" size='12' value=''></span> <span><input class='element text' id='last_name' maxlength='255' name='last_name' placeholder='Last Name.' required="" size='18' value=''></span></li> 
    </ul> 
</form>

等

來源

2013-07-11 SeanSS

甚至數據參數可以發送文件檢查我的回答如下 – DevZer0

@Ankit沒有問題。歡呼聲 – DevZer0

-1

您不能發送使用AJAX（不是這樣）文件。

如果你想發送文件，看看XMLHttpRequest2。相當不錯教程這裏 - http://www.html5rocks.com/en/tutorials/file/xhr2/

來源

2013-07-11 13:01:21 Andreyco

你可以使用ajax發送文件 – DevZer0

@ DevZer0你瘋了嗎？在沒有理由的情況下在downvoting之前查看該答案 – Andreyco

答案並不完全正確，但教程值得+1（以補償downvote）。 – zozo

使用$.ajax這裏是的，你可以上傳文件是

首先是如何讓我們用一個ID的典型形式。這個表格可以包含你想要的一個或多個文件。

然後在jQuery中，執行以下操作。

$('#btnupload').click(function() { 
    //the key is FormData object 
    var formData = new FormData(document.getElementById('fileupload')); 
    $.ajax({ 
     url: 'upload.php', //server script to process data 
     type: 'POST', 
     success: function (json) {} 
     data: formData, 
     dataType: "json", 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
});

這裏的關鍵是使用JavaScript FormData對象構造的$.ajax

來源

2013-07-11 13:06:41 DevZer0

感謝Fabricio，我不知道如何做這個縮進 – DevZer0

既然你已經在使用jQuery，爲什麼不用'$（'＃fileupload'）[0]'而不是'document.getElementById'？我看到的唯一有效區別是，如果'fileupload'形式不存在（在這種情況下，jQuery方法返回undefined，而getElementById返回null，但我認爲這不會影響' FormData的構造函數）。 – ajp15243

@ ajp15243感謝您的信息。我不知道。 – DevZer0

如何使用$ .ajax（）來上傳文件

回答

相關問題