我来帮你搞定这个整合难题！从你给出的代码来看，核心需求是把本地文件上传预览和模态框图库选图这两个功能打通，让不管是上传新图还是选择已有图库的图片，都能同步更新页面上的预览区域，同时还要关联到后续的表单提交（比如记录选中的图片文件名）。下面是具体的实现方案：

1. 补全基础结构 #

首先，我们需要添加模态框的HTML结构（这里用Bootstrap模态框做示例，你可以根据自己的UI框架调整），同时给现有代码加上隐藏字段来存储选中的图片文件名：

<!-- 现有图片预览区域 -->
<div id='div_img_name'></div>
<?php if(!empty($data)) { ?>
    <img src="<?php echo base_url().'public/img/upload/coupons/'.$data["file_name"]?>" class="coupon_pic" id="coupon_preview"/>
    <!-- 隐藏字段存储当前图片文件名 -->
    <input type="hidden" id="selected_img" value="<?php echo $data["file_name"]; ?>">
<?php } else { ?>
    <img id="coupon_preview" class="coupon_pic" src=""/>
    <input type="hidden" id="selected_img" value="">
<?php } ?>

<!-- 上传按钮区域（补全你的input） -->
<div class="coupon_btn">
    <div class="upload">
        <input type="file" id="upload_button" accept="image/*" />
        <button type="button" id="open_modal_btn">从图库选择</button>
    </div>
</div>

<!-- 模态框：图库选图 -->
<div class="modal fade" id="image_select_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择优惠券图片</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 这里假设图库图片是从后端加载的，循环输出已有图片 -->
                <div class="gallery-grid">
                    <?php 
                    // 假设$gallery_data是后端返回的图库图片列表
                    if(!empty($gallery_data)) {
                        foreach($gallery_data as $img) {
                            echo "<img src='".base_url()."public/img/upload/coupons/{$img['file_name']}' 
                                  class='gallery-img' 
                                  data-filename='{$img['file_name']}' 
                                  style='width:100px;height:100px;margin:5px;cursor:pointer;'/>";
                        }
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
</div>

2. 编写JavaScript逻辑 #

接下来用JS处理三个核心场景：本地文件预览、打开模态框、选中图库图片后更新预览：

// 1. 本地文件上传预览
document.getElementById('upload_button').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if(file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            // 更新预览图
            document.getElementById('coupon_preview').src = event.target.result;
            // 更新文件名显示（如果需要）
            document.getElementById('div_img_name').textContent = file.name;
            // 更新隐藏字段（本地文件需后续上传到服务器，这里临时存储文件名）
            document.getElementById('selected_img').value = file.name;
        }
        reader.readAsDataURL(file);
    }
});

// 2. 打开模态框
document.getElementById('open_modal_btn').addEventListener('click', function() {
    $('#image_select_modal').modal('show'); // 适配Bootstrap模态框调用方式
});

// 3. 选中图库图片，更新预览
document.querySelectorAll('.gallery-img').forEach(img => {
    img.addEventListener('click', function() {
        const filename = this.getAttribute('data-filename');
        const imgSrc = this.src;
        
        // 更新预览图
        document.getElementById('coupon_preview').src = imgSrc;
        // 更新文件名显示
        document.getElementById('div_img_name').textContent = filename;
        // 更新隐藏字段（服务器已存在的文件名，可直接提交）
        document.getElementById('selected_img').value = filename;
        
        // 关闭模态框
        $('#image_select_modal').modal('hide');
    });
});

3. 关键注意点 #

• 隐藏字段的作用：#selected_img是核心纽带，不管是上传新图还是选图库图，都要更新它的值，这样表单提交时就能拿到正确的图片文件名（如果是新上传的图，还需要额外添加AJAX上传逻辑，把文件传到服务器）。
• 图库图片加载：模态框里的图库图片需要从后端获取已上传的优惠券图片列表，循环渲染出来，给每个图片加上data-filename属性存储文件名，方便选中时快速获取。
• 样式适配：你可以根据自己的页面风格调整预览图、模态框、图库图片的CSS，保证UI风格统一。

这样就能把两个功能完美整合起来，不管用户是上传新图还是从图库选图，预览区域都会实时更新，同时也能正确记录选中的图片信息~

内容的提问来源于stack exchange，提问作者Ferdinand