Question

这个可能有点长。

我有一个表单，它使用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。还有一种方法可以删除“更新”按钮，并让它在用户选择时自动上传图像（而不是让它们按下按钮这样做）？

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

在css中，你可以把

试试这个：


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

在这个简单的css示例中，假设您将输入命名为“<textarea id="image"></textarea>”，文档会在元素中放置背景图像。

由于jQuery的CSS亲和性，你可能只使用jQuery就可以获得相同的结果。

想在我创建的自定义表单框中直观地加载图片（也能够删除）

1 个答案: