希望在我创建的自定义表单框中以视觉方式加载图片(也可以删除）

这个可能有点长。

我有一个表单，可以上传我用CSS定制的图片，以显示为框。我希望这样，当用户点击框并被提示上传图片时，他们可以选择一个并将其显示在框中（框将加长以适合图片…图片本身将调整大小以适合宽度，我已经处理了这一部分）。

我正试图用javascript、ajax等实现这一点…：

我包括这些脚本：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" src="/js/script.js"></script>

以及这里的代码：

http://homesconnect.me/js/jquery.form.js

script.js包含：

function validate_picture(form_data, form) {
    var form = form[0];
    if ( ! form.picture.value)
        return false; 
}
function show_picture_loader() {
    $('.add_picture_label').hide().before('<img src="/images/loader.gif" class="loader"/>');
}
function hide_picture_loader() {
    $('.loader').remove();
    $('.add_picture_label').show();
}
function show_error_message(form_obj, message) {
    $('.error').remove();
    if(message != '')
    {
        form_obj.before('<div class="notification_msg error">' + message + '</div>');
        $('html,body').animate({scrollTop: form_obj.parent().offset().top});
    }
}

我在页面中也有这样写的实时脚本：

   <script>
    $(document).ready(function(){
    $('.upload_picture_form').ajaxForm({
dataType: 'json', beforeSubmit: show_picture_loader, success: function(data) {
                                                         $('.pictures').prepend('<div class="profile_picture"><div class="delete_picture"><span></span></div><img src="' + data.image + '" /></div>');
                                                         $('form.account_form').prepend('<input type="hidden" name="image[]" value="' + data.image + '" />');
                                                         hide_picture_loader();
                                                         }
                                                         });
                      $('input.upload_picture_file_input').change(function(e) {
                                                                  $('.upload_picture_form').submit();
                                                                  });
                      $('.delete_picture span').live('click', function(e) {
                                                     $(this).closest('.profile_picture').fadeOut();
                                                     $.get('delete_picture', {image: $(this).closest('.profile_picture').find('img').prop('src')});
                                                     });
                      });
    </script> 

表单代码如下：

<div class="pictures add_pictures">
                <div class="add_picture">
                    <div class="upload_picture">
                        <form action="upload.php" method="POST" enctype="multipart/form-data" name="upload_picture_form" class="upload_picture_form">
                            <span class="add_picture_label">+ Add a Profile Picture</span>
                            <input type="file" name="upload_picture_fileinput" class="upload_picture_file_input"/>
                            <input type="hidden" name="MAX_FILE_SIZE" value="100000"/>
                            <br><br><br><br><br><br><br>
                            <input type="submit" id="submit" value="Upload" />
                        </form>
                    </div>
                </div>
            </div>

Upload.php获取上传的图像并将其保存在我的服务器上的一个目录中，同时将其文件名保存在mysql目录中。这很好用。然而，我包含的javascript并没有使图像出现在框中，因此我也无法删除它或任何内容。

如果重要的话，下面是相关的CSS：

    .content .pictures {
    padding: 5px;
    background: #fff;
    width: 350px;
    float: right;
    box-shadow: 0 1px 10px rgba(0,0,0,.2);
}
.content .pictures .profile_picture img {
    margin: 0;
    padding: 0;
    width: 350px;
}
.content .pictures .profile_picture {
    position: relative;
}
.content .pictures .profile_picture .delete_picture {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.content .pictures .profile_picture .delete_picture span {
    padding: 0;
    font: bold 12px/normal 'Helvetica', 'Arial', sans-serif;
    color: #444;
    cursor: pointer;
    background: url(/images/close.png) no-repeat;
    width: 30px;
    height: 29px;
    display: block;
}
.content .pictures .profile_picture:hover > .delete_picture {
    display: block;
}

如果你觉得你看到了问题或可以提供帮助，我将不胜感激。我知道这是一个愚蠢的哈。谢谢

p.s.还有没有一种方法可以让我删除"更新"按钮，并让它在用户选择时自动上传图像（而不是让他们点击按钮）？