Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 679|回复: 0

jquery-file-upload done 没有被调用、响应 教程问题 解决 thinkphp5 tp5 bootstrap 文件、图片上传 插件

[复制链接]
  • TA的每日心情
    奋斗
    2024-4-6 11:05
  • 签到天数: 748 天

    [LV.9]以坛为家II

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    705612
    发表于 2021-7-22 13:58:52 | 显示全部楼层 |阅读模式

     

     

    后台代码

        function upload() {
            
            $files = request()->file('files');
    
            // 移动到框架应用根目录/public/uploads/ 目录下
            if($files){
                 $item  = [];
                foreach($files as $k => $file){
                    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                    if($info){
                        $item[$k]['getSaveName'] = $info->getSaveName();
                    }else{
                        $this->error($file->getError());
                    }    
                }           
               
               exit(json_encode($item));
            }
       
        }       

     

    前端代码

    {include file="public/js" }
    <script src="/static/admin/js/jquery.ui.widget.js"></script>
    <script src="/static/admin/js/jquery.iframe-transport.js"></script>
    <script src="/static/admin/js/jquery.fileupload.js"></script>
    
    <script>
    $(function () {
        'use strict';
        
        $("#submit").click(function(){
            $('.alert').hide();
            if( !$('input[name="list_img"]').val() ){ showPopover($("#submit"), '给广告配张图吧'); return false; }
            
            var formData = $('#ad').serialize();
            $.ajax({
                url:"{:url('goods/edit')}",
                data:formData,
                dataType:"json",
                type:"post",
                success:function(r){
                    if(r.check==1){
                        showPopover($("#submit"), r.msg, r.url); 
                    }else{
                        showPopover($("#submit"), r.msg); 
                    }
    
                }
            })
            return false;
        });   
        
        
    //绑定delSpan类的点击事件,后加载出来的也有效
        $("body").delegate(".delSpan", "click", function () {
            
            $.ajax({
                url:"{:url('goods/upload')}",
                data:{'delImg':$(this).attr('name')},
                dataType:"json",
                type:"post",
    
            });
            
            $(this).parent('span').remove();
        });
            
        
         
    //上传前判断数量    
        $('#fileupload').click(function(){
            if($('.delSpan').length==2){
                showPopover($('.fileinput-button'),'最多上传8张图片');return false;
            }
            
    //调用上传对象        
            $('#fileupload').fileupload({
                    url: '{:url("goods/upload")}',
                    dataType: 'json',
                    done: function (e, data) {
                        if(data.result.code==0){
                            showPopover($('.fileinput-button'),data.result.msg);return false;
                        }
                        
    //遍历追加显示图片及删除按钮,并赋值数组img
                        $.each(data.result, function (index, file) {
                            $('#files').html("<span class='form-group'><img src='/uploads/"+file.getSaveName+"' class='img-responsive img-thumbnail'/><button name='"+file.getSaveName+"' class='delSpan col-xs-12 col-sm-12 col-md-12 col-lg-12 btn btn-success btn-xs'>点此删除上图</button><input type='hidden' name='list_img' value='"+file.getSaveName+"'><span>");
                            
                            $('#progress').hide();
                            
                        });
                    },
                    progressall: function (e, data) {
                        $('#progress').show();
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                        );
                    }
                }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');
    
        });
            
    
    
        $('#title2').click(function(){
            $('#title2-help').show();
        })   
    
        $('#category').change(function(){
    
        })
        
        function showPopover(target, msg, url=0) {
          target.attr("data-original-title", msg);
          $('[data-toggle="tooltip"]').tooltip();
          target.tooltip('show');
          target.focus();
          //2秒后消失提示框
          var id = setTimeout(
            function () {
              target.attr("data-original-title", "");
              target.tooltip('hide');
              if(url!=0){ window.location.href = url; }
            }, 2000
          );
        } 
        
        
    });
    </script>

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-4-26 17:53 , Processed in 0.071377 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表