图像属性格式不正确

时间:2016-02-09 10:41:30

标签: javascript jquery ajax jquery-ui dropzone.js

我试图将图像属性附加到我的div图像容器中,但正如我所看到的,图像不在同一个容器中

<img id="imgUpload" style="width: 140px; height: 140px;" class="img-thumbnail"></img>
<img src="static/uploads/4178ba43-a9f1-4315-b8ea-88c0531cc042.png"><img id="imgUpload" style="width: 140px; height: 140px;" class="img-thumbnail"></img>

以下是以下脚本。

<script>
    $(function(){
        $('#fileupload').fileupload({
            url: 'upload',
            dataType: 'json',
            add: function (e, data) {
                data.submit();
            },
            success:function(response,status) {
                console.log(response.filename);
                var filePath = 'static/uploads/' + response.filename;
                $("#imgUpload").append($("<img>", { src: filePath }));
                $('#filePath').val(filePath);
                console.log('success');
            },
            error:function(error){
                console.log(error);
            }
        });
    })
</script>

以下是应该扮演这个角色的html元素。

<div class="pull-right">
    <img id="imgUpload" style="width: 140px; height: 140px;" class="img-thumbnail"/><input type="hidden" name="filePath" id="filePath"></input>
</div>
</div>

3 个答案:

答案 0 :(得分:1)

更改以下行

$("#imgUpload").append($("<img>", { src: filePath }));

$("#imgUpload").attr("src", filePath);

答案 1 :(得分:1)

我完成了您之前的问题

我认为你需要这个

var img = $('<img />', { 

  src: filePath

});
img.appendTo($('.pull-right'));

答案 2 :(得分:0)

您可以像这样使用 Attr $("#imgUpload").append($("<img>", { src: filePath }));$("#imgUpload").attr("src", filePath);

这个例子

<script>
$(function(){
    $('#fileupload').fileupload({
        url: 'upload',
        dataType: 'json',
        add: function (e, data) {
            data.submit();
        },
        success:function(response,status) {
            console.log(response.filename);
            var filePath = 'static/uploads/' + response.filename;
            $("#imgUpload").attr("src", filePath);
            $('#filePath').val(filePath);
            console.log('success');
        },
        error:function(error){
            console.log(error);
        }
    });
})