可以使用网上的Plupload插件,官网地址: /
网上也有这个插件的详细说明,例如:/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", _url);$("#upload_carousel_img_" + id).children("input").val(_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="' + _url + '">\n' +'<input type="hidden" name="pact[]" id="pact" value="' + _url + '">' +' <span class="close-btn"></span>\n' +' </div>');}
