Question

我们正尝试从This site上传图片。

我们点击“上传图片”按钮。

然后会显示弹出框。

然后我们点击上传新图片按钮
之后，我们将从计算机中选择图像
然后我们再次点击“添加图片”按钮在网站上显示图片。

完成第4步后，我们要在“上传新图片”文字下方显示消息上传图片。

我在这段代码中缺少什么？

initialize: function($super, params) {

    $super(params);
    this.template =
      '<div id="customproductrelay" class="customproductrelay" style="display: none;">
                <div id="fancyusercustimg" class="modal-dialog" style="display:none;">
                <a class="closecustom" onclick="closePopup()" href="#"></a>
                <div class="modal-content"><div id="aitcg-tool-' + this.toolKey + '" class="tool-body">' +
      '<div class="uploadimg" id="uploadimg"><div class="fileinput-button padded text-center" >
                    <i class="glyphicon glyphicon-plus"></i><span >Upload New Image</span>
                    <input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" /></div></div>' +
      '<br />' +
      '<div style="display:none;"  id="add_image_{{rand}}_error" class="validation-advice">{{required_text}}</div>' +
      this._getUnderTemplateSelectHtml() +
      '<div class="buttons">' +
      '<button class="aitcg-button apply" type="button" id="submit-user-image-{{rand}}">{{addimage_text}}</button>' +
      '</div>' +
      '</div></div></div></div>';
  },

  // Submit image to the server

  submit: function() {
    var id = 'add_image_' + this.tools.config.rand;

    if (!$(id).value) {
      $(id + '_error').show();
      return;
    }
    $(id + '_error').hide();

    Aitcg.showLoader();
    AIM.upload(this.config.requestUrl, id, {
      onComplete: this.loadUploadedImage.bind(this)
    });
  },

  //For Displaying message

  success: function($super, params) {

    return params.previewElement.classList.add("Image uploaded");
  }

Answer 1

快速解决方案是在<span >Upload New Image</span>

下添加空白范围标记

HTML MARKUP：

<span>Upload New Image</span></br>
<span id="spnMessage"></span>

JS CODE：

//For Displaying message

  success: function($super, params) {

    $("#spnMessage").html("Image Uploaded");
    return params.previewElement.classList.add("Image uploaded");
  }

您需要更新模板，代码看起来像这样

this.template =
      '<div id="customproductrelay" class="customproductrelay" style="display: none;">
                <div id="fancyusercustimg" class="modal-dialog" style="display:none;">
                <a class="closecustom" onclick="closePopup()" href="#"></a>
                <div class="modal-content"><div id="aitcg-tool-' + this.toolKey + '" class="tool-body">' +
      '<div class="uploadimg" id="uploadimg"><div class="fileinput-button padded text-center" >
                    <i class="glyphicon glyphicon-plus"></i><span >Upload New Image</span></br>
<span id="spnMessage"></span>
                    <input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" /></div></div>' +
      '<br />' +
      '<div style="display:none;"  id="add_image_{{rand}}_error" class="validation-advice">{{required_text}}</div>' +
      this._getUnderTemplateSelectHtml() +
      '<div class="buttons">' +
      '<button class="aitcg-button apply" type="button" id="submit-user-image-{{rand}}">{{addimage_text}}</button>' +
      '</div>' +
      '</div></div></div></div>';
  }

Answer 2

this.template = 
        '<div id="aitcg-tool-' + this.toolKey + '" class="tool-body">' +
            '<input type="file" id="add_image_{{rand}}" name="new_image" />' +
            '<br />' +
            '<div style="display:none;" id="add_image_{{rand}}_error" class="validation-advice">{{required_text}}</div>' +
            this._getUnderTemplateSelectHtml() +
            '<div class="buttons">' +
                '<button class="aitcg-button" type="button" id="submit-user-image-{{rand}}">{{addimage_text}}</button>'+
            '</div>' +
        '</div>';

用

替换this.template

    this.template = 
    '<div id="aitcg-tool-' + this.toolKey + '" class="tool-body">' +
        '<input type="file" id="add_image_{{rand}}" name="new_image"/><br/>'                +           '<div style="display:none;" id="add_image_{{rand}}_error"
         class="validation-advice">{{required_text}}</div><div style="display:none;" id="add_image_{{rand}}_success" class="validation-advice">File Uploded</div>' + this._getUnderTemplateSelectHtml() +
         '<div class="buttons">' +
               '<button class="aitcg-button" type="button" id="submit-user-image-{{rand}}">{{addimage_text}}</button>'+
            '</div>' +
        '</div>';

更改loadUploadedImage函数后

loadUploadedImage: function( url )
{
    if (!url.error) {
        var img = $$('.techimg')[0];
        $$('.techimg').each(function(elem) {
            if(elem.parentNode.visible()){img = elem;}
        });
        img.onload = function(e){
            this.addImage(Aitcg.getEventTarget(e));
            Aitcg.hideLoader();
        }.bind(this);
        img.src = url.src;
    } else {
        Aitcg.hideLoader();
        alert(url.error);
    }
},

替换为

 loadUploadedImage: function( url )
 {            
    if (!url.error) {
    $('add_image_' + this.tools.config.rand+'_success').show();
        var img = $$('.techimg')[0];
        $$('.techimg').each(function(elem) {
            if(elem.parentNode.visible()){img = elem;}
        });
        img.onload = function(e){
            this.addImage(Aitcg.getEventTarget(e));
            Aitcg.hideLoader();
        }.bind(this);
        img.src = url.src;           
    } else {
        Aitcg.hideLoader();
        alert(url.error);
    }
},

上传图像后显示消息

2 个答案: