动态图像上传到备用gridster小部件上

Posted 2021-03-29

我写了一个javascript代码，其中当用户添加新小部件时，他被要求上传小部件上显示的图像。但是当我上传图像时，它出现在备用小部件上。（当我添加第一个小部件和上传图像时，上传的图像出现在第二个小部件上（当我添加第二个小部件时）。第一个小部件为空，然后图像出现在备用小部件上。

以下是JS Code

<script type="text/javascript">
 var gridster;
 var $color_picker = $('#color_picker');
 document.getElementById('buttonid').addEventListener('click', openDialog);


 function openDialog() {
   document.getElementById('fileid').click();

    var preview = document.createElement('img');
    preview.setAttribute("height","60px");
    preview.setAttribute("width","60px");

  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();    //API for reading file stored on user computer

  reader.addEventListener("load", function () {    //"load" :This eventlisterner "listens" loading of file. Once it is loaded function is triggered
    preview.src = reader.result;   
  });

  if (file) {
    reader.readAsDataURL(file);    // helps in reading the content of "file"
  }




   var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text':'-'
    }))
    .append($(preview));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);
}


gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [80, 80],
  widget_margins: [5, 5],
  helper: 'clone',
  resize: {
    enabled: true
  }
}).data('gridster');

$('.gridster').on("click", ".delete-button", function() {
  gridster.remove_widget($(this).parent());
});

html代码

<input id='fileid' type='file' hidden/>
<input id='buttonid' type='button' value='Add Widget' />

Fiddle

答案

将您的代码更改为

 var gridster;
 var $color_picker = $('#color_picker');
 document.getElementById('buttonid').addEventListener('click', openDialog);


 function openDialog() {
  document.getElementById('fileid').click();
 }
 $("#fileid").change(function(){
  var preview = document.createElement('img');
  preview.setAttribute("height","60px");
  preview.setAttribute("width","60px");

  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();    //API for reading file stored on user computer

  reader.addEventListener("load", function () {    //"load" :This eventlisterner "listens" loading of file. Once it is loaded function is triggered
  console.log("AHS"+reader);
  preview.src = reader.result;   
 });

 if (file) {
  reader.readAsDataURL(file);    // helps in reading the content of "file"
 }
 var color = $color_picker.val();

 // build the widget, including a class for the selected color value
 var $widget = $('<li>', {
   'class': 'color_' + color
 })
 .append($('<button>', {
  'class': 'delete-button',
  'text':'-'
 }))
 .append($(preview));

 // add widget to the grid
 gridster.add_widget($widget, 1, 1);
 });


 gridster = $(".gridster ul").gridster({
 widget_base_dimensions: [80, 80],
 widget_margins: [5, 5],
 helper: 'clone',
 resize: {
  enabled: true
 }
 }).data('gridster');

 $('.gridster').on("click", ".delete-button", function() {
  gridster.remove_widget($(this).parent());
 });

在打开对话框时调用函数，需要将其更改为选择文件时。

Fiddle