Javascript 提交后显示图像URL

我有一个表单，用户提交一个图像，提交后图像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>

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_文件显示在输入文本表单字段中。如何实现这一点？

您有一个选择，就是在行后回显

$target\u文件

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'
那样调用它，它将正常工作
您可以使用sessions（会话）作为一个选项，并将其设置为变量/会话数组和输入中的条件语句value@Fred-ii-如何在输入文本字段中输出会话而不刷新页面？从PHP函数中输出所需的内容，也许
echo$target\u文件
-在AJAX函数中读取它（在
success:
code中它将是
data
）。。。使用
数据执行操作
在需要的地方显示所需内容。。。或者，与其从一般的提示中为自己找出答案，不如使用发布的答案——这正是你想要的want@JaromandaX当我这样做的时候，我的PHP代码被输出，而不是$target_文件，它在输入框中显示我所有的HTML代码，这一定是因为
url
是空的，默认情况下是当前页面，因此返回整个页面。如果您将php放入另一个文件中，并在上面的
url
中调用它，如
url:'file.php'，
它将正确返回。当我这样做时，文件中的所有php代码都将被回显出来。您可以对新代码或其他内容制作一个粘贴箱，以便我们可以看到您的最新代码是什么吗？第1-17行应位于不同的文件中，假设ajax.php，第32行仍然是一个空url，正如我前面提到的，它应该是
url:'yourFileName.php'
。
$.ajax({
    type: 'POST',
    url: '',                      // (*)
    data: new FormData(this),
    processData: false,
    contentType: false,
    success: function(data) {
        $('input[name=image_url]').val(data);
    }
});