图像隐藏在bpopup中的负载上

时间:2014-02-17 09:33:44

标签: javascript jquery popup jcrop bpopup

我需要帮助!!

我有以下代码onSubmit的文件上传:

function uploadFile() {
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "php_parsers/file_upload_parser.php");
    ajax.send(formdata);
}

function completeHandler(e) {
    var fileDest = e.target.responseText; //file location is responseText
    _("uloadedImg").src=fileDest;         // '_' is getelementbyid function
    $('#sesame').bPopup();
}

我正在按如下方式在对象上初始化JCrop:

jQuery(function($) {
        $('#uloadedImg').Jcrop();
    });

HTML是:

<div id="sesame" style="display:none">
<img src="" id="uloadedImg">
</div>

由于某些原因,当我测试此代码时,图像标记变为:

<img src="user/admin/default_avatar.jpg" id="uloadedImg" style="display: none; visibility: hidden; width: 0px; height: 0px;">

我不明白将style元素放在图像标记中是什么,但是当我从chrome dev工具中删除这些元素时,JCrop也无效。

如果我无法让它工作,我即将把笔记本电脑扔在墙上。 :(

1 个答案:

答案 0 :(得分:1)

考虑到我对这个问题的反应非常热烈,我认为我会分享出错的地方!

我在图片标签上初始化jcrop之前我有一张图片。我将脚本的jcrop部分移动到ajax响应,如下所示:

function uploadFile() {
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "php_parsers/file_upload_parser.php");
    ajax.send(formdata);
}

function completeHandler(e) {
    var fileDest = e.target.responseText; //file location is responseText
    _("uloadedImg").src=fileDest;         // '_' is getelementbyid function
    jQuery(function($) {
        $('#uloadedImg').Jcrop();
    });
    $('#sesame').bPopup();
}

感谢大家的帮助!