zoukankan      html  css  js  c++  java
  • jquery-file-upload done 没有被调用、响应 教程问题 解决 thinkphp5 tp5 bootstrap 文件、图片上传 插件

    后台代码

        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>
  • 相关阅读:
    Android 面试知识集1
    Android 开发自己的网络收音机2——电台列表(SlidingMenu侧滑栏)
    Android 程序drawable资源保存到data目录
    Android 开发自己的网络收音机1——功能要求及设计方案
    Android内存机制分析2——分析APP内存使用情况
    Android内存机制分析1——了解Android堆和栈
    Android Gallery实现3D相册(附效果图+Demo源码)
    Android 后台发送邮件 (收集应用异常信息+Demo代码)
    纯代码写UI的时候,如何指定style?
    解决SimpleCursorAdapter不能自动更新的问题
  • 原文地址:https://www.cnblogs.com/shaoing/p/7833614.html
Copyright © 2011-2022 走看看