乱花渐入迷人眼------从解决jqueryEasyUI上传插件提交ajax请求谈网页调试

由于要给格斗男神写搏击俱乐部ERP系统,就要用到jquery Easyui插件规范数据和表单的录入,其中一项功能就是上传商品图片,

而且是在datagrid-detailview中使用filebox完成图片的上传和在线浏览,其效果如下

按照jqueryEasyUI惯用的套路,我们不妨在filebox的onChange的事件中,获取filebox的值就可以了,例如$("#imageurl").filebox(‘getValue’)

然后在实例化一个FormData,把filebox的值append上一提交就可以了,但是,thinkphp5 用request()->file(‘imageurl‘),居然获取不到!!!!

,翻了一晚上,最后看到3年前的一篇旧帖子,顿时深受启蒙,原帖子链接:https://bbs.csdn.net/topics/390994322,最关键的在于运行程序页面并审查filebox

加载文件后,网页dom的变化情况,有资深程序员发现,filebox加载文件后会创建一个input标签,其id值为:filebox_file_id_1,跟踪情况如下图所示

最大的收获是,学会了如何使用chorme定位dom元--------在点击F12以后进入开发者模式,定位到Element标签,点击右侧的html代码,左侧代码相关对应的

区域将会被添加背景色,这样一来,层级再多,也不用担心,最终,我们将抽丝剥茧,挖到最终要查看的元素

  • datagrid加载的php表单部分代码
<div class="form-group col-md-4">
                <label for="inputState">上传图片</label>
                <input id=‘imageurl‘ style="width:300px"  type="easyui-filebox"  name=‘imageurl‘ style="margin-top:5px">
 </div>
  • 相关jquery代码
  function jinerjihao()//写着玩的日期生成代码----因为thinkphp5的上传文件夹命名方式默认为日期
    {
        var mydate = new Date();
        var myyear = mydate.getFullYear();
        console.log(typeof (myyear));
        var mymonth = mydate.getMonth()+1;
        mymonth = (mymonth<10?"0"+mymonth.toString():mymonth.toString());
        var myday = mydate.getDate();
        myday = (myday<10?"0"+myday.toString():myday.toString());
        return myyear.toString()+mymonth+myday;
    }
  //下列代码,filebox的值发生改变,就会向服务端发送图片,并回显上传的图片  
    $("#imageurl").filebox({
        onChange:function () {
            var dataform = new FormData();
            dataform.append(‘imageurl‘,$("#filebox_file_id_1")[0].files[0]);
            $.ajax({
                url:‘/picview‘,
                type:‘post‘,
                contentType:false,
                processData:false,
                data:dataform,
                MIME:‘multipart/form-data‘,
                success:function (data) {
                    console.log(data[‘mywords‘]);
                    $("img").attr(‘src‘,‘/static/pics/head/‘+‘/‘+data[‘mywords‘])
                   /* $.each(data,function (k,v) {
                        console.log(k+"-------"+v);
                    })*/
                }
            })
        }
    });
  • 服务端--thinkphp5框架下的上传功能,写的很简单
 function picview()
 {
        $request=Request::instance();
        //return json($request->param());
        $pics = request()->file(‘imageurl‘);
        //return json(["mywords"=>$pics]);
        $targetpath = ROOT_PATH . ‘public‘.DS.‘static‘ . DS . ‘pics‘.DS.‘head‘;
        if($pics)
        {
            $info = $pics->move($targetpath);
            if($info)
            {
                return json(["mywords"=>$info->getSaveName()]);
            }
        }
  }

原文地址:https://www.cnblogs.com/saintdingspage/p/10463884.html

时间: 2024-10-08 09:52:41

乱花渐入迷人眼------从解决jqueryEasyUI上传插件提交ajax请求谈网页调试的相关文章

解决文件上传插件Uploadify在火狐浏览器下,Session丢失的问题

因为在火狐浏览器下Flash发送的请求不会带有cookie,所以导致后台的session失效. 解决的方法就是手动传递SessionID到后台. $("#fileresultfiles").uploadify({ swf: '/Scripts/uploadify/uploadify.swf', uploader: '/UploadFiles.ashx', queueID: 'fileQueue', buttonText: '附件上传', auto: true, debug: false

jQuery上传插件Uploadify出现Http Error 302错误解决

前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首 先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行 post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然 就不能获取到session,

jquery上传插件uploadify 报错http error 302 解决方法之一

前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改,问题并没有解决. 因此,不排除这是解决302错误的解决方法之一,但是我接下来提出另一解决方案,考虑到异步传输的问题,供大家参考(反正我是成功了). 首先是uploadify初始化: $(function() {           $('#projectfile').uploadify({    

解决swfupload上传文件session失效

使用flash插件上传,可能是很多人选择的方式,但是随之而来的session丢失问题也着实让人头疼 swfupload代码如下: <script type="text/javascript" src=\'#\'" echo base_url();?>/static/js/swfupload/swfupload/swfupload.js"></script> <script type="text/javascript&qu

解决phpmyadmin上传文件大小限制的配置方法

解决phpmyadmin上传文件大小限制的配置方法 phpmyadmin导入SQL文件时涉及到phpmyadmin上传文件大小限制问题,默认phpmyadmin上传文件大小为2M,如果想要phpmyadmin上传超过2M大文件,就需要修改phpmyadmin上传文件的大小配置或者将大文件分几批上传,相对来说修改phpmyadmin上传文件大小的限制来得方便很多.解决phpmyadmin上传文件大小限制问题涉及修改php.ini配置文件和phpmyadmin配置文件. 修改phpmyadmin上传

解决phpmyadmin上传文件大小限制的配置方法(转)

phpmyadmin导入SQL文件时涉及到phpmyadmin上传文件大小限制问题,默认phpmyadmin上传文件大小为2M,如果想要 phpmyadmin上传超过2M大文件,就需要修改phpmyadmin上传文件的大小配置或者将大文件分几批上传,相对来说修改phpmyadmin 上传文件大小的限制来得方便很多.解决phpmyadmin上传文件大小限制问题涉及修改php.ini配置文件和phpmyadmin配置文件. 修改phpmyadmin上传文件大小限制主要分修改php.ini配置文件和p

struts2+extjs文件上传完整实现(解决了上传中的各种问题)

首先需要引入上传控件 <script type="text/javascript" src="<%=basePath%>/js/ext/examples/ux/fileuploadfield/FileUploadField.js" charset="utf-8"></script> 弹出上传框对应extjs代码 var uploadForm=new Ext.FormPanel({ id:'uploadForm'

解决vsftp &quot;上传 553 Could not create file&quot;

这个问题只要: 1. setsebool -P ftpd_disable_trans 1 2. service vsftpd restart 太纠结了,呵呵 解决vsftp "上传 553 Could not create file"

Windows 7 32 上 selenium 2+sikuli解决swfupload类型上传插件

安装sikuli,安装完成之后,安装目录在C:\Program Files,将 安装文件复制到c盘下 配置环境变量 安装eclipse,将selenium的java版本的jar包,添加到你是使用的工程里面 在sikuli-ide下面有一个sikuli_script.jar,将它添加到你使用的工程里面 在程序里面添加上用户图片保存的目录,这一点很重要,否则会提示图片找不到 具体程序如下 package com.client.pmj; import java.util.concurrent.Time