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

问题

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.

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

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 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 + '%'
                );
            }
        });

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>

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.

回答1:

The correct way to do this should be:

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

来源：https://stackoverflow.com/questions/28151490/how-to-update-dom-with-html-returned-from-server-after-jquery-file-upload-is-don

标签

jquery

jquery-file-upload