javascript - 提交后显示图片URL

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);
    }
});

只要表单提交不会将您带到另一个页面，数据就会是您回显的内容。

(*)注释:

• 由于 url 为空(默认情况下为当前页面)，因此上述代码将返回整个页面。如果您将 PHP 放入另一个文件中并像 url: 'file.php' 那样调用它，它将正常运行。