Question

我有一个用户提交图像的表单，提交后图像URL将显示在输入文本字段中。表单数据通过Ajax中继到PHP。然后将图像上载到服务器。我已经实现了提交系统，但我不知道如何在输入文本字段中显示上传的URL，以便用户可以看到它。我不希望页面刷新，这一切都是动态发生的。

这是我的代码：

HTML

<form class="image_upload" method="post" action="">
    <input name="server_upload" type="file">
     <input type="text" name="image_url" readonly>
    <input type="submit" value="UPLOAD TO SERVER">
</form>

的jQuery / AJAX

$('.image_upload').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        if ($('.image_upload').valid())
        {

            $.ajax({
              type: 'POST',
              url: '',
              data: new FormData(this),
              processData: false,
              contentType: false,
              success: function(data) {

              }
            })
     }
 })

PHP

if (isset($_FILES["server_upload"]))
    {
        $name = $_FILES["server_upload"]["name"];
        $tempName = $_FILES["server_upload"]["tmp_name"];
        $target_file = $_SERVER['DOCUMENT_ROOT'] . "/stories/media/images/$name";
        if (getimagesize($target_file) == true)
        {
            $ext = pathinfo($name, PATHINFO_EXTENSION);     
            $name = basename($name, "." . $ext);
            $name = $name . uniqid() . "." . $ext;
            $target_file = $_SERVER['DOCUMENT_ROOT'] . "/stories/media/images/$name";
        }

        move_uploaded_file($tempName, $target_file);
    }

我想在用户提交图像后在输入文本表单字段中显示$ target_file。我该如何做到这一点？

Answer 1

您有一个选择是在行

之后回显$target_file

move_uploaded_file($tempName, $target_file);
echo $target_file;

然后在你的ajax成功中，你可以使用它：

$.ajax({
    type: 'POST',
    url: '',                      // (*)
    data: new FormData(this),
    processData: false,
    contentType: false,
    success: function(data) {
        $('input[name=image_url]').val(data);
    }
});

只要表单提交没有将您带到另一个页面，data将是您回复的内容。

（*）注意：

由于url为空（默认情况下为当前页面），因此上述代码将返回整个页面。如果您将PHP放入另一个文件并将其称为url: 'file.php'，则它将正常运行。

提交后显示图片网址

1 个答案: