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

您可以尝试以下代码。

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">'
          + '</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;
};