Question

好的这对你们这些人来说可能是一个独特的问题。我正在建立一个网站，用户可以通过该网站更改帐户背景..所以我已经达到了这一点......现在我需要帮助。

Javascript代码

<script type="text/javascript" >
 $(document).ready(function() { 
        $('#photoimg').live('change', function()            { 
                       $("#preview").html('');
                $("#preview").html("<body background="http://mysite.com/image/loading.jpg"></body>");
            $("#imageform").ajaxForm({
                        target: '#preview'
        }).submit();

            });
        }); 
</script>

在HTML中我已经放置了此代码

这是放置回声的地方 <div id="preview"></div>

我在这里尝试了div标签

<div id="preview"> <body background="http://mysite.com/image/please_add_backqround.jpg"></body> </div>
我在背景中尝试了风格

<div id="preview"> <body style="background-image: url(http://mysite.com/image/please_add_backqround.jpg);"> </div> </body>
然后我尝试了div中的样式，几乎涵盖了整个页面。

<html><body> <div id="preview"> <div id="covering_whole_page" style="background-image:url ( http://mysite.com/image/please_add_backqround.jpg);"></div></div></html>

他们都没有工作。：（

Html表格

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> <input type="file" title="upload your fav. background" name="photoimg" id="photoimg" onchange="pressedx()"></form>

ajaximage.php

<?php
session_start();
$session_id='1'; //$session id
$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))
                                {
                                //sqlquery space
                        echo "<body background='uploads/".$actual_image_name."' ></body>";
                        }
                            else
                                echo "failed";
                        }
                        else
                        echo "Image file size max 1 MB";                    
                        }
                        else
                        echo "Invalid file format..";   
                }

            else
                echo "Please select image..!";

            exit;
        }
?>

请帮我正确使用我也想添加上传到DATABASE的文件，这样当用户点击SAVE时，我的数据库中保存的特定jpg名称将被删除..谢谢

Answer 1

这是我认为你想要实现的非常简化的版本。我已经把你的身体变成了一个div，因为身体不应该是div的孩子。

Javascript + HTML

<script>
$(document).ready(function() {
    $('#ajaxForm').ajaxForm(function(response) { 
        var newImage = response;
        //alert(response); -- check your response is correct
        $('#preview > div').css("background-image","url(" + response + ")");
    });
});
</script>

<div id="preview">
    <div style="background-image: url(testimage1.png); width: 100%; height: 400px;"></div>    
</div>
<form method="post" id="ajaxForm" action="ajaximage.php">
<input type="submit" value="submit" />
</form>

<强> ajaximage.php

<?php
//Your code returns the url -- omitted your code for simplicity
echo "testimage2.jpg";

你应该看到ajaximage只返回一个url。您可以使用ajaxForm来获取此响应，然后使用javascript动态更新背景图像。

尝试像twitter一样改变背景

1 个答案: