Question

我正在使用脚本将图像上传到服务器。它使用ajax将图像发布到php脚本，在验证之后，图像被赋予唯一的文件名，然后将其保存到目录中。我试图了解如何将图像的新文件名作为变量返回到我的表单页面，然后我可以使用该新变量，例如在<div id="preview"><img src="no-image.jpg" /></div> <form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data"> <input id="uploadImage" type="file" accept="image/*" name="image" /> <input id="button" type="submit" value="Upload"> </form> <div id="err"></div> <h2>The new file name is: <?php echo "new_file_name"?></h2>中回显它。任何帮助都会非常感激。

my_form_page.php

$(document).ready(function (e) {
    $("#form").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "ajaxupload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend : function()
            {
                //$("#preview").fadeOut();
                $("#err").fadeOut();
            },
            success: function(data)
            {
                if(data=='invalid')
                {
                    // invalid file format.
                    $("#err").html("Invalid File !").fadeIn();
                }
                else
                {
                    // view uploaded file.
                    $("#preview").html(data).fadeIn();
                                        $("#file_name").html(data).fadeIn();
                    $("#form")[0].reset();  
                }
            },
            error: function(e) 
            {
                $("#err").html(e).fadeIn();
            }           
       });
    }));
});

jquery

<?php

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory

if(isset($_FILES['image']))
{
    $img = $_FILES['image']['name'];
    $tmp = $_FILES['image']['tmp_name'];


    // get uploaded file's extension
    $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

    // can upload same image using rand function
    $final_image = rand(1000,1000000).$img;

    // check's valid format
    if(in_array($ext, $valid_extensions)) 
    {                   
        $path = $path.strtolower($final_image); 

        if(move_uploaded_file($tmp,$path)) 
        {
            echo "<img src='$path' />";


        }
    } 
    else 
    {
        echo 'invalid';
    }
}


?>

ajaxupoad.php

{{1}}

Answer 1

要将文件名恢复为脚本，只需在php中回显即可！我会使用JSON作为响应的包装器，以便您可以一次发回多个值，如下所示：）

$response = array(
    'status' => 'success',
    'name'   => $img,
    'path'   => $path
);

echo(json_encode($response));
exit();

接下来，添加＆＃34; dataType＆＃34;你的ajax请求，如此

  $.ajax({
        url: "ajaxupload.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        dataType: 'json', <-- THIS RIGHT HERE

现在服务器响应将自动解析为JSON，因此您可以像这样访问您的响应

   success: function(data)
        {
            if(data['status']=='invalid')
            {
                // invalid file format.
                $("#err").html("Invalid File !").fadeIn();
            }
            else
            {
                var name = data['name'];
                // view uploaded file.
                $("#preview").html('<img src="' + data['path'] + '">').fadeIn();
                                    $("#file_name").html(data).fadeIn();
                $("#form")[0].reset();  
            }
        },

只要确保你的PHP脚本中有回音的任何时候，你json_encode响应FIRST，然后退出!!否则，脚本将继续执行，您将收到多个回复，每个人都会感到困惑。

PS：在ajaxupoad.php中，不要忘记改变

else{
   echo invalid;
}

到

else{
    echo(json_encode(array(
        'status' => 'invalid'
    )));
    exit(); <-- Seriously, that really is important...
}

Answer 2

从php脚本中回显$ path并在ajax响应中使用

$warehouseFrom = Warehouse::find(1);
$warehouseTo = Warehouse::find(2);
$product = Product::find(23);
$product->transfer($warehouseFrom->id, $warehouseTo->id);

如何在ajax响应中返回变量？

2 个答案: