分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

thinkphp 多图片上传 ?单图片上传

发布时间:2023-09-06 01:19责任编辑:胡小海关键词: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 多图片上传 ?单图片上传

原文地址:http://www.cnblogs.com/zc290987034/p/7717526.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved