使用ajax上传时如何回显值输入类型文本？答案

【问题标题】：How to echo value input type text when use ajax upload?使用ajax上传时如何回显值输入类型文本？
【发布时间】：2016-05-04 15:36:36
【问题描述】：

使用ajax上传时如何回显值输入类型文本？

这是我将文件上传到目录attachments_files 的代码，效果很好。

但我有一些问题。我想知道如何使用 php 在upload.php 中回显来自id="username_uploader" 的值？

我试过这样使用

echo $_POST['username_uploader'];

但不起作用。请帮帮我。

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="username_uploader" type="text" name="username_uploader" value="test_user"/>
<input id="attachment_file_input_id" type="file" name="sortpic" onchange="test_fn()"/>
<div id="demoajax"></div>
<script>
function test_fn () {
            var file_data = $('#attachment_file_input_id').prop('files')[0];   
            var form_data = new FormData();                  
            form_data.append('file', file_data);
            $.ajax({
                        url: 'upload.php',
                        dataType: 'text',
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: form_data,                         
                        type: 'post',
                        success: function(php_script_response){
                        alert("upload success");
                        $('#demoajax').append(php_script_response);
                    }
            });
};
</script>

上传.php

<?php
    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else 
    {
        move_uploaded_file($_FILES["file"]["tmp_name"], "attachments_files/" .$_FILES["file"]["name"]);

        echo $_POST['username_uploader'];
    }
?>

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

您需要在发送的FormData 中包含username_uploader 值，因为您目前省略了它。试试这个：

var form_data = new FormData();                  
form_data.append('file', file_data);
form_data.append('username_uploader', $('#username_uploader').val());

让您的 PHP 代码返回 JSON 也是一种更好的做法，这样您就不必担心返回值中的格式或空格。这是一个完整的例子：

function test_fn () {
    var form_data = new FormData();          
    form_data.append('file', $('#attachment_file_input_id').prop('files')[0]);
    form_data.append('username_uploader', $('#username_uploader').val());

    $.ajax({
        url: 'upload.php',                      
        type: 'POST',
        dataType: 'json',
        cache: false,
        processData: false,
        data: form_data,   
        success: function(response){
            alert("upload success");
            $('#demoajax').append(response.uploader);
        }
    });
};

<?php
    if (0 < $_FILES['file']['error']) {
        echo json_encode(array('error' => 'Error: ' . $_FILES['file']['error'] . '<br>'));
    }
    else 
    {
        move_uploaded_file($_FILES["file"]["tmp_name"], "attachments_files/" .$_FILES["file"]["name"]);    
        echo json_encode(array('uploader' => $_POST['username_uploader']));
    }
?>

【讨论】：