Question

我已经使用ajaxSubmit将文件成功上传到linux服务器。上传文件后，名称+大小+删除应该出现在我的网站上。

例如，1.jpg，2.jpg，3.jpg被上传到服务器，我提交的网站会出现如下：

1.jpg 3k delete
2.jpg 4k delete
3.jpg 5k delete

在上传文件之前，我的html结构是：

<td style="width:30%" id="impPic">
            <div class="btn">
            <span>addFile</span>
            <input id="fileupload" type="file" name="mypic">
            </div>
            <div class="files"><b>...</b><span>...</span></div>
        </td>

上传三个文件后，我想要html，如：

<td style="width:30%" id="impPic">
            <div class="btn">
            <span>addFile</span>
            <input id="fileupload" type="file" name="mypic">
            </div>
            <div class="files"><b>...</b><span>...</span></div>
            <div class="files"><b>...</b><span>...</span></div>
            <div class="files"><b>...</b><span>...</span></div>
        </td>

我的文件有固定的CSS样式：

.files{height:10px; font-size:10px;line-height:22px; margin:10px 0}

这是我的ajaxSubmit代码：

var divD=1;
$(function () {
var files = $(".files");
newDiv = "<div class='files'+divD+''><b class='dataname'>'+data.name+'('+data.size+'k)</b> <span class='delimg' name='+data.name+'('+data.size+'k)' rel='+data.pic+'>delete</span></div>";
    $("#fileupload").change(function(){
    $("#myupload").ajaxSubmit({
        dataType:  'json',
        beforeSend: function() {
        ......
        },
        uploadProgress: function() {
        },
        success: function(data) {
            $(newDiv).insertAfter($('#impPic div:eq('+divD+')'));
            divD = divD + 1;
            $('.files').html("<b class='dataname' >"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>delete</span>");           
        },
        error:function(xhr){
            ......
        }
    });
  });
 });

但不幸的是，它失败了。我认为文件＆＃39; + divD +＆＃39; .html是错误的。谁能帮帮我？

Answer 1

我发现您的代码存在两个问题...

首先是html字符串＆＃34; newDiv＆＃34;您要插入的内容，第二个是对字符串文字对象的jQuery .html()的调用＆＃34; files'+divD+'＆＃34;。

您希望newDiv对象具有值为divD的串联html字符串，并且数据来自响应，但对象data未定义，直到逻辑流入成功回调。

并且我认为第二个问题会返回jquery TypeError问题，因为您尝试在非.html() function上调用DOM - jQuery object。

更新您的代码并以这种方式尝试：

newDiv = "";
    ...
    success: function(data) {
        newDiv = "<div class='files" + divD + "'><b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' name='" + data.name + data.size + "k' rel='" + data.pic + "'>delete</span></div>";
        $(newDiv).insertAfter($('#impPic div:eq(' + divD + ')'));
        divD = divD + 1;

        $(".files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");         
    },
   ...

修改

您可以更新html字符串并添加ID以在具有files类的每个元素上具有唯一选择器，而不是上述选择器，将class selector "."更改为{{1} }。

，您的代码将如下所示......

Id selector "#"

如果这不符合您的需求，您可以保留上面的第一个示例并将您的css选择器更新为：

newDiv = "<div id='files" + divD + "'class='files'"... ... $("#files" + divD).html("<b class='dataname'>" + data.name + "(" + data.size + "k)</b><span class='delimg' rel='" + data.pic + "'>delete</span>");

这将选择一个以＆＃34;文件＆＃34;开头的类的所有元素。

Answer 2

files'+divD+'是一个字符串，您尝试从字符串调用方法html，该字符串不存在。

尝试$('.files' + divD).html('something');或files.find('.files' + divD).html('something');

Answer 3

files'+divD+'.html应为$('.files' + divD).html(..);

如何添加<div> </div>和name + size + delete出现在新div中。 javascript jquery

3 个答案: