JQuery 文件上传完成后，如何使用从服务器返回的 HTML 更新 DOM？

Question

我正在尝试使用 Blueimp JQuery 文件上传将图像上传到我的服务器。服务器然后 returns 一个 HTML <img> 标签，我想将其附加到我的 DOM 以向用户显示上传的图像。然后他们可以做更多的事情，比如使用 JCrop 或其他任何东西来裁剪它。

我可以很好地将图片上传到服务器。而服务器 returns 这个“<img src="/path/to/temporary/image.jpg" />”

我想将此 HTML 代码附加到 div，但我无法使这部分工作。

HTML:

<!-- file input -->
<input id="ProfileImage" type="file" name="ProfileImage" />
<!-- upload progress bar --->
<div id="progress" class="progress">
     <div class="progress-bar progress-bar-success"></div>
</div>
<!-- div to which I want to append the server's html response -->
<div id="files" class="files"></div>

JQuery 文件上传：

        $('#ProfileImage').fileupload({
            url: '/path/to/server',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000, // 5 MB
            done: function (e, data) {
                $('#files').append(data); // This is obviously not working!
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        });

我只想让我的页面 HTML 在上传结束时看起来像这样：

<...>
<!-- image HTML inserted into the div -->
<div id="files" class="files"><img src="path/to/image" /></div>

如果我使用 alert(data) 查看返回的内容，我只会看到一个显示 [object Object] 的对话框。但是，如果我查看 Firebug 中的控制台并单击提交图像的 Post 事件中的“响应”选项卡，它会显示 <img src="userfiles/newimage.jpg" /> 作为服务器的输出。

Answer 1

正确的做法应该是：

$('#files').append(data.result);

JQuery 文件上传完成后，如何使用从服务器返回的 HTML 更新 DOM？

How to update DOM with HTML returned from server after JQuery File Upload is done?

jquery

jquery-file-upload