javascript - JQUERY图片上传表单和css问题

Question

我目前正在使用图像上传器。我在使用 jquery/css 时遇到困难。我需要帮助以使删除按钮出现在已渲染的拇指图像旁边。另外，有没有办法可以用著名的 [x] 替换它也表示删除？我正在使用此SITE中的示例

图片：

jQuery

<script>
    function createImageForm(index) {

        var form = '';

        form += '<div><table cellspacing="0">';
        form += '<tr><td class="label">'
              + '<label for="imageToUpload' + index + '">'
              + $.uploaderPreviewer.messages.imageLabel + ' ' + index + ':</label></td>';
        form += '<td class="removeImageButton">'
              + '<button class="small removeImage" /></td>';
        form += '<td class="imageFormFileField">'
              // BUG: If the "enctype" attribute is assigned with jQuery, IE crashes
              + '<form enctype="multipart/form-data">'
              + '<input id="imageToUpload' + index + '" type="file" />'
              + '<input type="hidden" name="currentUploadedFilename"'
              + ' class="currentUploadedFilename" /></form>'
              + '</td></tr>';
        form += '<tr><td></td><td></td><td>'
              + '<div class="previewImage"><img /></div>'
              + '</td></tr></table></div>';

        return form;
    };
</script>

CSS

button.small {
    font-size: 10px;
    width: 50px;
}

.imageForms td.removeImageButton {
    text-align: center;
    vertical-align: middle;
    width: 70px;
}

Answer 1

你可以试试下面的代码。

函数createImageForm（索引）{

    var form = '';

    form += '<div><table cellspacing="0">';
    form += '<tr><td class="label">'
          + '<label for="imageToUpload' + index + '">'
          + $.uploaderPreviewer.messages.imageLabel + ' ' + index + ':</label></td>';
    form += '<td class="removeImageButton">'
          + '</td>';
    form += '<td class="imageFormFileField">'
          // BUG: If the "enctype" attribute is assigned with jQuery, IE crashes
          + '<form enctype="multipart/form-data">'
          + '<input id="imageToUpload' + index + '" type="file" />'
          + '<input type="hidden" name="currentUploadedFilename"'
          + ' class="currentUploadedFilename" /></form>'
          + '</td></tr>';
    form += '<tr><td></td><td></td><td>'
          + '<div class="previewImage" style="float:left; margin:0 10px 0 0"><img /></div>'
          + '<button class="small removeImage" /></td></tr></table></div>';

    return form;
};