Question

背景：我有一个django项目，用户可以在其中上传多个图像，其中一个将成为主图像。我正在使用Filepond上传和优化图像。

Filepond上传文件的顺序并不总是与用户选择的文件顺序相同。因此，我尝试为用户提供一个选项，即用户单击文件（在这种情况下，显示为预览图像），并且单击的文件将成为主图像。

我使用以下代码将用户单击的图像记录为服务器端的主图像，并且可以正常工作。

onactivatefile: (file) => {

    filename = file.filename;

    $.ajax({
        type: "POST",
        url: "{% url 'ajax_mainimage' pk=sellingitem.pk %}",
        data: {pk:"{{sellingitem.pk}}", 'filename':filename, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        dataType: "json",
    }); 
},

问题：为了向用户提供更好的体验，我尝试实现以下目标：当用户单击其中一个预览图像（例如图像A）时，文字（“这是您的主要图片”）或在图片A中显示一个图标。如何执行此操作或类似方法？谢谢！

编辑

我使用以下代码临时解决了此问题，但这并不是最佳选择。基本上，我生成了单击图像的缩略图以显示给用户。

onactivatefile: (file) => {
    filename = file.filename;

    // get the div that will contain mainimage 
    const img = document.getElementById('insert_mainimage')

    // set src of img
    img.src = '../../media/post_images/' + {{sellingitem.pk}} +'/' + filename;

    $.ajax({
        type: "POST",
        url: "{% url 'ajax_mainimage' pk=sellingitem.pk %}",
        data: {pk:"{{sellingitem.pk}}", 'filename':filename, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        dataType: "json",
    }); 
},

仍在寻求帮助：我真正想要的是单击图像（由Filepond图像预览插件渲染）后，该特定图像上将显示一个图标/文本。或者，将在每个上传的图像上显示一个图标，一旦单击该图标，它将以某种方式更改以指示该图像已被选择为主图像。

Answer 1

我正在从事同一工作。

尝试使用此代码

      onactivatefile={(e) => {
          const getEl = document.querySelectorAll('.filepond--file-info-main');
          for (let i = 0; i < getEl.length; i++) {
            if(getEl[i].innerText === e.file.name){
                getEl[i].style.backgroundColor = "red";
            }else{
                getEl[i].removeAttribute("style");
            } 
          }
      }}

触发onactivatefile（Filepond）时，将图标/ div添加到预览图像中

1 个答案: