thinkphp 多图片上传 单图片上传
Posted 遇事稳坐钓鱼台
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
多图片上传
html模板
<div class="controls"> <td><img src="/Public/Liu/images/tujia.png" id="logo"> <ul class="tuji"> <if condition="$good[‘imagelist‘][0] neq ‘‘ "> <volist name="good[‘imagelist‘]" id="vo"> <li> <img class="img" src="{$vo}"> <img class="ico" onclick="del_func(this)" src="/Public/Admin/images/del_btn.png" /> <input type="hidden" name="image[]" value="{$vo}"> </li> </volist> </if> </ul> </td> </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/Admin/images/del_btn.png">‘; html += ‘<input type="hidden" name="image[]" 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>
以上是关于thinkphp 多图片上传 单图片上传的主要内容,如果未能解决你的问题,请参考以下文章