thinkphp 多图片上传 单图片上传
不管是单图片上传还是多图片上传都必须要引用这两个js
下载地址
链接:http://pan.baidu.com/s/1eStkUt0 密码:asvo
<script src="Public/static/plupload-2.1.9/plupload.full.min.js"></script> <script src="Public/static/plupload-2.1.9/i18n/zh_CN.js"></script>
多图片上传
多图上传css样式
.controls{overflow: hidden;} .tuji{ margin: 10px 0; padding: 0; float: left;} .tuji li{ width: 100px; height: 100px; float: left; margin: 0 2px; list-style-type: none; position: relative} .tuji li img.img{ width: 100%; height: 100%;} .tuji li img.ico{ position: absolute; top: -5px; right: -5px; cursor: pointer; width: 20px; height: 20px;} #logo{cursor: pointer; width: 100px; height: 100px; margin: 10px;}
HTML模板
<div class="form-group"> <label class="control-label"> 商品宣传图 <span class="check-tips"></span></label> <div class="controls"> <img src="/Public/Liu/images/jia.png" id="logo" > <ul class="tuji"> <if condition="$info['images'][0] neq '' "> <volist name="info['images']" id="vo"> <li> <img class="img" src="{$vo}"> <img class="ico" onclick="del_func(this)" src="/Public/Liu/images/cha.png" /> <input type="hidden" name="images[]" value="{$vo}"> </li> </volist> </if> </ul> </div> </div>
js代码
<script> var uploader = new plupload.Uploader({ "runtimes":"html5,flash,silverlight,html4", "flash_swf_url" : "/Public/static/plupload-2.1.9/Moxie.swf", "silverlight_xap_url" : "/Public/static/plupload-2.1.9/Moxie.xap", "browse_button":$("#logo")[0],//点击触发事件 "url":"{:U('Fileupload/img_upload')}",//控制器地址 "filters" : { max_file_size : '3M', mime_types: [ {title : "Image files", extensions : "jpg,gif,png,jpeg"} ] }, "multi_selection":false,// 多选 "multipart_params":{"dir":"pic"}, init:{ FilesAdded: function(up, files) { this.start(); }, FileUploaded:function(up,files,res){ var data = $.parseJSON(res.response); var html = $('.tuji').html(); if(data.status == 1){ html += '<li><img class="img" src="'+data.data+'">'; html += '<img class="ico" onclick="del_func(this)" src="/Public/Liu/images/cha.png">'; html += '<input type="hidden" name="images[]" value="'+data.data+'"></li>'; $('.tuji').html(html); } }, Error:function(up,err){ alert(err.message); } } }); uploader.init(); </script> <script> function del_func(dom){ $(dom).parent('li').remove(); } </script>
单图片上传
HTML模板
<div class="form-group"> <label class="control-label"> 尾部显示图 <span class="symbol required"></span> <span class="check-tips"></span></label> <div class="controls"> <if condition="$info['bjt_2'] eq ''"> <img src="Public/Home/images/jia.png" id="bjt_2" class="ks_img"> <input type="hidden" name="bjt_2" value="" id="yci_2"> <else/> <img src="{$info['bjt_2']}" id="bjt_1" class="ks_img"> <input type="hidden" name="bjt_2" value="{$info['bjt_2']}" id="yci_1"> </if> </div> </div>
js 代码
<script> var uploader = new plupload.Uploader({ "runtimes":"html5,flash,silverlight,html4", "flash_swf_url" : "/Public/static/plupload-2.1.9/Moxie.swf", "silverlight_xap_url" : "/Public/static/plupload-2.1.9/Moxie.xap", "browse_button":$("#bjt_2")[0],//点击触发事件 "url":"{:U('Fileupload/img_upload')}",//控制器地址 "filters" : { max_file_size : '3M', mime_types: [ {title : "Image files", extensions : "jpg,gif,png,jpeg"} ] }, "multi_selection":false,// 多选 "multipart_params":{"dir":"pic"}, init:{ FilesAdded: function(up, files) { this.start(); }, FileUploaded:function(up,files,res){ var data = $.parseJSON(res.response); var html = $('.controls').html(); if(data.status == 1){ $('#bjt_2').attr('src',data.data); $('#yci_2').val(data.data); /*html += '<img class="img" src="'+data.data+'">'; html += '<img class="ico" onclick="del_func(this)" src="Public/Home/images/del_btn.png">'; html += '<input type="hidden" name="images[]" value="'+data.data+'">';*/ // $('.controls').html(html); } }, Error:function(up,err){ alert(err.message); } } }); uploader.init(); </script>