Question

我创建了一个表单。多数民众赞成如下......

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
$(document).ready(function(){

 $("#sbt").click(function(){
    var re=$("#file").val();



$.ajax({
            type: "POST",
            url: "loadajax.php",
            data: $("#data").serialize()+ '&photo=' +re,
            success: function(data) {

                $("#datas").html(data);
            },
            error: function(){
                  alert('error handing here');
            }
        });

});
});

</script>

Ajax响应页面

<?php
echo "<pre>";
print_r($_POST);

var_dump($_FILES);
?>

返回所有输入值。但文件未上传。我不知道如何使用ajax上传文件。请帮帮我......

Answer 1

试试这个

$("#sbt").click(function(){
var pht = $("#ph").val();
var str2 = "your_folder/"; // destination folder, if needed
var upvid = str2.concat(pht);   

var data = new FormData();
data.append( 'photo', $('#photo')[0].files[0] );
data.append( 'pht', pht );



$.ajax({
        type: "POST",               
        url: "loadajax.php",
        processData: false,
        contentType: false,
        cache:true,
        data: data,             
        success: function(data){
           $("#datas").html(data
        } ,
        error: function(){
              alert('error handing here');
        }
    });     
});



<?php
$a = $_POST['pht'];
$file = str_replace( "\\", '/', $a );
$ofile = basename($file);

?>

Answer 2

你必须使用一个插件，jQuery不支持这个开箱即用。最知名的插件是ajaxForm

这将使用ajax将表单发布到表单操作字段中的给定URL。有些活动可用于添加验证和提交后功能。

Answer 3

你也可以这样做：

function upload() {
    // id of the form "documentUploadForm"
    var form = document.getElementById("documentUploadForm");
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
    var url = '<c:url value="/loadajax.php"/>';
    xhr.open('POST', url, true);
    xhr.onload = function(e) {
        if (xhr.status === 200) {
            outputData = JSON.parse(xhr.responseText);
            console.log("Response:" +outputData);
        }
    };
    xhr.send(formData);
}

如何使用ajax提交带有文件上传的表单...？

3 个答案: