希望在我创建的自定义表单框中直观地加载图片（也可以删除）

Question

this one may be a little bit of a long one.

I have a form that takes a picture upload that I have customized with CSS to appear as a box. I would like it so that when the user clicks the box and are prompted to upload a picture, they can choose one and have it appear in the box (where the box will lengthen to fit the picture...the picture itself will be resized to fit the width, i have this part handled).

I am trying to make this happen with javascript, ajax, etc...:

I am including these scripts:

<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>

as well as the code found here:

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

script.js contains:

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});
    }
}

I also have the live script in the page itself written as so:

   <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> 

The form code is as so:

<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 takes the image uploaded and saves it in a directory on my server, as well as saving its filename in a mysql directory. This works fine. However, the javascript I have included are not making the image appear in the box, and hence I am not able to delete it or anything either.

Here's the relevant CSS if it matters:

    .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;
}

If you feel like you see a problem or can help I would be very appreciative. I know this one is a doozy ha. Thanks.

ps also is there a way that I can remove the "update" button, and have it so that the image is uploaded automatically when the it is chosen by the user (as opposed to having them hit a button to do so)?

Answer 1

EDIT: I may have misunderstood the question. What I interpreted was an effect like that of Newgrounds.com's text boxes, which have a picture inside the text boxes, a neat aesthetic. If I have misinterpreted the question, I apologize

in css, you can put

try this:

textarea#image { background-image:url('image.jpg'); width:600; height:400 }

in this simple css example, assuming you named your input " <textarea id="image"></textarea> ", the document puts a background image inside the element.

Because of jQuery's CSS affinity, you might be able to achieve the same result using just jQuery.