时间戳

首页 > 解决方案 > 如何在innerHTML中调用函数和访问

javascript - 如何在innerHTML中调用函数和访问

问题描述

我想在更新页面显示存储在数据库中的数据。我的问题是我想访问 innerHTML 标签来显示图像和任何其他数据，如

document.getElementById(visibilities).checked = true;

或者

for (i=0; i<files.length; i++) {
                var image = new Image();
                image.src = files[i];
                image.height = 100;
                display.appendChild(image); 
            }

顺便说一句，我不知道如何在 innerHTML 中使用 onload 访问标签或调用函数。请告诉我。提前致谢。

function getData(id) {
    var path  = '/project/update/' + id;

    restfull.get({
        path: path
    }, function(err, data) {
        if(err) return;
        var title = data.title;
        var descriptions = data.descriptions;
        var visibilities = data.visibilities;
        var files = data.image;
        
    
        
        const modal =  new window.Modal({
            modalContainerId: 'updateModal'
            , modalTitleText: `Update Your Project`
            , modalContentsInnerHTML: ` <form method="put" id="updateform" enctype="multipart/form-data" onload='getData()'>
          <input type="radio" name="visibilities" value="public" id="public">Public
          <input type="radio" name="visibilities" value="private" id="private">Private
          <input type="radio" name="visibilities" value="unlisted" id="Unlisted">Unlisted <br>
          <label for="title">Project Title</label>
          <input type="text" name="title" id="title" required value="${title}"><br>
          <label for="descriptions">Description</label>
          <input type="text" name="descriptions" id="descriptions" required value="${descriptions}"><br>
          <label for="multi_image">Images/ Videos
          <input type="file" id="multi_image" name="multi_image" multiple onchange='previewImages()'><br>
          <div id="display"></div>
          <div id="projectpreview"></div>
          
        </form>`
            , modalSubmitBtnText: 'Update'
            , modalSubmitBtnAction: function(){updatesubmit(data._id)}
            , modalCancelBtnText: 'Cancel'
    
            , modalCancelBtnAction: function() {
                modal.destroy();
            }
        })
        modal.show();
    })
}

标签： javascripthtml

解决方案

如果要预览上传的图像以进行更新：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#preview').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#imgInput").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInput" />
  <img id="preview" src="#" alt="your image" />
</form>

如果要显示数据库中已存储的图像：

var image = document.getElementById('preview');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.alt="here should be some image";
<img id="preview">

推荐阅读