多(图片/文件)上传(Plupload插件上传图片)

可以使用网上的Plupload插件,官网地址: https://www.plupload.com/

网上也有这个插件的详细说明,例如:  https://www.sojson.com/blog/214.html  

我实在yii下使用的 可以根据自己的需求 将插件的核心文件放入对应的位置 

实现一个这样的多图片上传(数据库这五个图存的是一个字段且为json)

html.php

 

<?php $carousel = json_decode($info->carousel, true);
for ($i = 0; $i < 5; $i++) { ?>
    <div class="dzSetup">
        <label>图片<?= $i + 1 ?></label>
        <div id="upload_carousel_img_<?= $i ?>">
            <img src="<?= $carousel[$i]['img'] ?>" class="carousel_img_url"/>
            <input type="hidden" name="carousel[<?= $i ?>][img]" id="carousel_img_input"
                   value="<?= $carousel[$i]['img'] ?>">
        </div>
        <span class="red">图片尺寸：880PX*160PX</span>
        <input type="text" name="carousel[<?= $i ?>][link]" placeholder="添加链接"
               value="<?= $carousel[$i]['link'] ?>" id="link<?= $i ?>">
        <a href="javascript:void(0)" class="table-look remove_carousel">清除</a>
    </div>
<?php } ?>

js

 

/**
 * 取消本行的内容
 */
$(".remove_carousel").click(function () {
    var remove_parent = $(this).parent();
    remove_parent.children("div").find('img').attr('src', '');
    remove_parent.children("div").find('input').val('');
    $(this).prev().val('');

});

 

 

 

/**
 * 上传轮播图
 */
upload_info = [];

function upload(id) {
    upload_info[id] = new plupload.Uploader({
        //创建实例的构造方法
        runtimes: 'html5,flash,silverlight,html4',
        //上传插件初始化选用那种方式的优先级顺序
        browse_button: "upload_carousel_img_" + id, // 上传按钮
        url: "/admin/system/ajaxavatar", //远程上传地址
        flash_swf_url: '/js/Moxie.swf', //flash文件地址
        filters: {
            max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            //允许文件上传类型
            mime_types: [{title: "files", extensions: "jpg,png,gif,jpeg"}],
        },
        multi_selection: false, //true:ctrl多文件上传, false 单文件上传
        BeforeUpload: function (up, file) {
            //重点在这里，上传的时候自定义参数信息
            uploader_pic.setOption("multipart_params");
        },
        init: {
            FilesAdded: function (up, files) { //文件上传前
                this.start();
            },
            UploadProgress: function (up, file) { //上传中，显示进度条
                // var percent = file.percent;
                // $("#" + file.id).find('.bar').css({"width": percent + "%"});
                //  $("#" + file.id).find(".percent").text(percent + "%");
            },
            FileUploaded: function (up, file, info) {
                //文件上传成功的时候触发
                var data = eval("(" + info.response + ")");
                $("#upload_carousel_img_" + id).children("img").attr("src", data.org_url);
                $("#upload_carousel_img_" + id).children("input").val(data.org_url);
            },
            Error: function (up, err) { //上传出错的时候触发
                alert(err.message);
            }
        }
    });
    upload_info[id].init();
}

upload(0);
upload(1);
upload(2);
upload(3);
upload(4);

当然也可以一次上传多个图片  一一展示

 

<li>
    <label>上传合同</label>
    <a href="javascript:void(0)"   id="upload_carousel_img" class="yzmBtn">上传合同</a>
</li>
<li>
    <label></label>
<div class="img_div">

</div>
</li>

只需要将 multi_selection  改为true  且 FileUploaded改为如下  即可实现

 

FileUploaded: function (up, file, info) {
    //文件上传成功的时候触发
    var data = eval("(" + info.response + ")");

    img_div = $('.img_div').append('<div class="yyzz yyzz2" id="upload_pact_img">\n' +
        '                        <img src="' + data.org_url + '">\n' +
        '<input type="hidden" name="pact[]" id="pact" value="' + data.org_url + '">' +
        '                        <span class="close-btn"></span>\n' +
        '                        </div>');
}