3

背景：我有一个 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 图像预览插件渲染）后，该特定图像上会显示一个图标/文本。或者，每个上传的图像上都会显示一个图标，一旦单击，图标会以某种方式更改以指示该图像已被选为主图像。

4

1 回答 1

0

我正在做同样的工作。

试试这个代码

      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");
            } 
          }
      }}
于 2020-04-19T14:39:32.353 回答