图片上传管理器

Posted 2023-03-11

【中文标题】图片上传管理器

【英文标题】：Image upload manager

【发布时间】：2016-02-08 14:36:20

【问题描述】：

我正在尝试基于 Wordpress 媒体管理器为我的 CMS 构建图像管理器。CMS 正在 Yii2 中开发。

现在我可以上传和查看所有上传的图片。我接下来想要的是能够添加自定义按钮（上传徽标、上传标题等），这将允许用户以模式调用图像管理器。然后上传或从图库中选择图像并将图像 ID 添加到隐藏输入字段（徽标、标题等）。但我在完成此操作时遇到了麻烦。

这是我目前所拥有的：

我在一种形式中有两个输入字段，一个用于徽标，另一个用于网站图标

徽标隐藏输入：ID -> site-logo_media_id

img 预览：类 -> preview_site-logo_media_id

按钮：ID -> logo-button，自定义属性 input_id -> site-logo_media_id，class-> showModalButton

        <?= $form->field($model, 'logo_media_id')->hiddenInput(['maxlength' => true]) ?>
        <img class="preview_site-logo_media_id" src="" >
        <?= html::button('logo', ['title' => 'Upload Logo', 'id' => 'logo-button', 'input_id' => 'site-logo_media_id', 'class' => 'showModalButton btn btn-success']); ?>

favicon hiddeninput: ID -> site-favicon_media-id

img 预览：类 -> preview_site-favicon_media_id

按钮：ID -> favicon-button，自定义属性 input_id -> site-favicon_media_id，class-> showModalButton

        <?= $form->field($model, 'favicon_media_id')->hiddenInput(['maxlength' => true]) ?>
        <img class="preview_site-favicon_media_id" src="" >
        <?= Html::button('favicon', ['title' => 'Upload Favicon', 'id' => 'favicon-button', 'input_id' => 'site-favicon_media_id', 'class' => 'showModalButton btn btn-success']); ?>

当按下其中一个按钮时，会调用一个模态，其中包含所有上传的图像和一个上传更多图像的选项。图库中的图片被包裹在 li 标签中，标签为 gallery-item，属性 data-key 包含图片 身份证。

javascript

show_file_manager();

function show_file_manager() 
  $('.showModalButton').click(function() 
    // opens modal
    var input_id = $(this).attr("input_id");
    var preview_class = "preview_" + $(this).attr("input_id");
    // input_id gets the hiddeninput id, preview class is meant to display the selected images.
    select_gallery_item(input_id, preview_class);
    //the input_id and preview_class are passed to the next function
  );


function select_gallery_item(input_id, preview_class) 
  $('.gallery-item').click(function() 
    // gallery-item is the class name of the li containting an image
    var file_id = $(this).attr('data-key');
    // file_id is the image id
    var src = $(this).children('img').attr('src');
    // src gets the value from the images src to use in the preview class
    console.log(file_id);
    if (file_id) 
      $("#add-to-input").click(function() 
        // this button passes the image id to the hiddeninput with the correct input id(site-logo_media-id, site-favicon_media-id) and the images src to the preview class(preview_site-logo_media-id, preview_site-favicon_media-id)
        $('#' + input_id).val(file_id);
        $("." + preview_class).attr("src", src);
      );
    
  );

问题：

似乎每次运行 .showModalButton 时，function select_gallery_item (javascript) 都会递增。按一次显示console.log(file_id)，按两次显示console.log(file_id)两次，依此类推

如果我按下第二个按钮 .showModalButton，图像 id 和 src 将被添加到两个隐藏输入字段（site-favicon_media- id, site-logo_media-id)

我希望我能够传达问题，任何帮助将不胜感激。我做错了什么？我怎样才能让它变得更好？提前致谢。

【参考方案1】：

第一个问题是由select_gallery_item函数引起的。每次单击模态按钮时，另一个 click 事件将绑定到 .gallery-item 元素以及 #add-to-input 元素.

我猜你正在尝试将参数传递给点击事件？

如果是这样，请查看这个问题Passing parameters to click() & bind() event in jquery?

我猜第二个问题是由同样的原因引起的。首先，您单击为徽标选择图像，它被绑定到#add-to-input，当您更改网站图标时，第一个绑定的点击事件也会更改徽标的 src 和 id。

所以尝试分离嵌套的点击绑定。