完成JQuery文件上传后，如何使用服务器返回的HTML更新DOM? [英] How to update DOM with HTML returned from server after JQuery File Upload is done?

问题描述

我正在尝试使用Blueimp JQuery File Upload将图像上传到我的服务器.然后，服务器返回一个HTML <img>标记，我想将其附加到我的DOM上，以向用户显示上传的图像.然后，他们可以做进一步的事情，例如使用JCrop或其他方式进行裁剪.

I'm trying to use Blueimp JQuery File Upload to upload an image to my server. The server then returns a HTML <img> tag which I want to append to my DOM to show the user what image was uploaded. They can then do further things like crop it using JCrop or whatever.

我可以将图像上传到服务器.然后服务器返回此"<img src="/path/to/temporary/image.jpg" />"

I am able to upload the image to the server just fine. And the server returns this "<img src="/path/to/temporary/image.jpg" />"

我想将此HTML代码附加到div，但是我无法使此部分正常工作.

I want to append this HTML code to a div but I'm not able to get this part working.

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文件上传:

JQuery File Upload:

        $('#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结尾:

I just want to end up with my page HTML looking like this at the end of the upload:

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

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

If I use alert(data) to see what comes back I just get a dialog showing [object Object]. But if I look in the console in Firebug and click on the Response tab in the Post event that submitted the image, it shows <img src="userfiles/newimage.jpg" /> as the output from the server.

推荐答案

正确的方法应该是:

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

这篇关于完成JQuery文件上传后，如何使用服务器返回的HTML更新DOM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！