使用Ajax和PHP上传图像并返回上传的图像URL

Question

我试图不刷新就上传图像，但是我对ajax的了解不多。 我使用ajax函数提交帖子时，有php文件，您的返回图像URL。

使用Javascript

 $(document).ready(function() { 

        $('#photoimg').live('change', function()            { 
                   $("#preview").html('');
            $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm({
                    target: '#preview'
                                       }
    }).submit();

        });
    }); 

PHP

  <?php

       $path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {
        $name = $_FILES['photoimg']['name'];
        $size = $_FILES['photoimg']['size'];

        if(strlen($name))
            {
                list($txt, $ext) = explode(".", $name);
                if(in_array($ext,$valid_formats))
                {
                if($size<(1024*1024))
                    {
                        $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                        $tmp = $_FILES['photoimg']['tmp_name'];
                        if(move_uploaded_file($tmp, $path.$actual_image_name))
                            {


                                $imge1="uploads/".$actual_image_name;
                                echo $imge1;

                            }
                        else
                            echo "failed";
                    }
                    else
                    echo "Image file size max 1 MB";                    
                    }
                    else
                    echo "Invalid file format..";   
            }

        else
            echo "Please select image..!";

        exit;
    }
        ?>

HTML

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>

</div>
<img src = "" id="thumb_img" />

现在结果是图像URL。 当图像选择ajax自动将沙子发布到php.Php保存图像并返回url且此url显示在目标div中。 像图像一样选择target div背景变化。

Answer 1

我会做类似的事情：

$('#myForm').ajaxForm(function(url) { 
   $('#preview').css('background-image', "url(" + url + ")"); 
});