多(圖片/文件)上傳(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>');
}