非常简单的适用的ajax提交数据

最新推荐文章于 2024-09-15 00:20:13 发布

echoHelloWord

最新推荐文章于 2024-09-15 00:20:13 发布

阅读量565

点赞数 1

分类专栏：开发应用文章标签： ajax 服务器数据 ajax无刷新提交

本文链接：https://blog.csdn.net/echocdzh/article/details/50728100

版权

开发应用专栏收录该内容

170 篇文章 0 订阅

订阅专栏

 服务器部分
################
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){
       // $this->show('<style type="text/css">*{ padding: 0; margin: 0; } div{ padding: 4px 48px;} body{ background: #fff; font-family: "微软雅黑"; color: #333;font-size:24px} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.8em; font-size: 36px } a,a:hover{color:blue;}</style><div style="padding: 24px 48px;"> <h1>:)</h1><p>欢迎使用 <b>ThinkPHP</b>！</p><br/>版本 V{$Think.version}</div><script type="text/javascript" src="http://ad.topthink.com/Public/static/client.js"></script><thinkad id="ad_55e75dfae343f5a1"></thinkad><script type="text/javascript" src="http://tajs.qq.com/stats?sId=9347272" charset="UTF-8"></script>','utf-8');
        $this->display();
    }

    public  function  uploadImg(){
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传（子）目录
        // 上传文件
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
            $this->error($upload->getError());
        }else{// 上传成功
              $success=array();
              $success['save_path']='Uploads/'.$info['filepath']['savepath'].'/'.$info['filepath']['savename'];
              $success['name']=$info['filepath']['name'];
              $success['status']=1;
              $this->ajaxReturn($success);
              // 上传到微信平台 返回meadId 并写入数据库
      }
    }

}

------------ 视图部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>thinkphp  微信 操作 案例</title>
    <style type="text/css">
          #fileUploadBox{
               width: 500px;
               height: 300px;
               border: 1px solid red;
          }
    </style>
</head>
<body>
   <h2>给微信关注用户群发商品推广</h2>
   <h3>第一步: 本地上传素材到微信</h3>
    请选择微信封面图片素材:
   <div id="fileUploadBox"></div>



   <h3>第二步:选择用户</h3>
   <h3>第三步:在后台发送给用户</h3>
<script type="text/javascript" src="Public/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Public/js/jquery.from.js"></script>
<script type="text/javascript">
    function createHtml(obj) {
        var htmstr = [];
        htmstr.push(  "<form id='_fileForm' enctype='multipart/form-data'>");
        htmstr.push(  "<table cellspacing=\"0\" cellpadding=\"3\" style=\"margin:0 auto; margin-top:20px; border: 1px solid #808080;\">");
        htmstr.push(  "<tr>");
        htmstr.push(  "<td class=\"tdt tdl\">请选择文件：</td>");
        htmstr.push(  "<td class=\"tdt tdl\"><input id=\"loadcontrol\" type=\"file\" name=\"filepath\" id=\"filepath\" /></td>");
        htmstr.push(  "<td class=\"tdt tdl tdr\"><input type=\"button\" οnclick=\"fileloadon()\" value=\" 一键上传到微信平台\"/></td>");
        htmstr.push(  "</tr>");
        htmstr.push(  "<tr> <td class=\"tdt tdl tdr\" colspan='3'style='text-align:center;'><div id=\"msg\"> </div></td> </tr>");
        htmstr.push(  "<tr> <td class=\"tdt tdl tdr\" style=\" vertical-align:middle;\">图片预览：</td> <td class=\"tdt tdl tdr\" colspan=\"2\"><div style=\"text-align:center;\"><img width='300px' height='100px' src=\"Public/image/no_template_icon.png\"/></div></td> </tr>");
        htmstr.push(  "</table>")
        htmstr.push(  "</form>");
        obj.html(htmstr.join(""));
    }
    function fileloadon() {
        $("#msg").html("");
        $("img").attr({ "src": "Public/image/loading.gif" });//切换成加载图片
        $("#_fileForm").submit(function () {
            $("#_fileForm").ajaxSubmit({
                type: "post",
                url: "{:U('Index/uploadImg')}",
                success: function (data1) {
                      if(data1.status){
                          $("#msg").html("文件名：" + data1.name + '上传成功');
                          $("img").attr({ "src": data1.save_path });
                      }
                  }
            });
            return false;
        });
        $("#_fileForm").submit();
    }
</script>
   <script type="text/javascript">
       $(document).ready(function() {
           createHtml($("#fileUploadBox"));
       })
   </script>
</body>
</html>