原生php ajax 文章添加模块 图片上传 代码

原生php ajax 文章添加模块 图片上传 代码

代码实例qingyu2020-11-08 5:15:251062A+A-

  原生php  ajax 文章添加模块 图片上传 代码

  原生php ajax文章添加的难点在于怎么异步上传图片

原生php  ajax 文章添加模块 图片上传 代码

  话不多说直接上代码:

  前台表单:

<form action="" method="post" enctype="multipart/form-data">
   <table class="articleadd">
      <tr>
         <td>标题</td>
         <td><input type="text" name="title"></td>
      </tr>
      <tr>
         <td>分类</td>
         <td>
            <select id="cateid" style="height: 30px ;width: 300px;" name="cateid">
               <option value ="">请选择分类</option>
                                   <?php foreach ($cateRes as $c)  {?>
                                       <option value="<?php echo $c['id'];?>"><?php echo $c['catename'];?></option>
                                   <?php }?>
            </select>
         </td>
      </tr>
      <tr>
         <td>图片</td>
         <td><input id="img" type="file"  name="img"  accept="image/*"></td>
      </tr>
      <tr>
         <td>内容</td>
         <td><textarea id="ct" name="content">
            
         </textarea></td>
      </tr>
   </table>
                   <button id="btn" style="margin-left: 50px;"  type="button" >提交</button>
</form>

  ajax:

var ue = UE.getEditor('ct',{ initialFrameHeight:400,initialFrameWidth:950 });
      $("#btn").click(function () {
          var content = ue.getContent();
          var title = $('input[name="title"]').val();
          var cateid = $('#cateid').val();
          var imgs = $('#img').val();
          if(!title) {
              dialog.error('请输入标题');
              return;
          }
          if(!cateid) {
              dialog.error('请选择分类');
              return;
          }
          if(!imgs)
          {
              dialog.error('请上传图片');
              return;
          }
          if(content=='') {
              dialog.error('请输入内容');
              return;
          }

          var fileArray = document.getElementById('img').files[0];
          var formData = new FormData();
          formData.append('file', fileArray);
          formData.append('title',title);
          formData.append('cateid',cateid);
          formData.append('content',content);

          var url = "/admin/article_add_save.php";
          $.ajax({
              url,/*传向后台服务器文件*/
              type: 'POST',    /*传递方法 */
              data:formData,  /*要带的值,在这里只能带一个formdata ,不可以增加其他*/
              //传递的数据
              dataType : 'json',  //传递数据的格式
              async:false, //这是重要的一步,防止重复提交的
              cache: false,  //设置为false,上传文件不需要缓存。
              contentType: false,//设置为false,因为是构造的FormData对象,所以这里设置为false。
              processData: false,//设置为false,因为data值是FormData对象,不需要对数据做处理。
              success: function (result){
                  if(result.status == 0) {
                      return dialog.error(result.message);
                  }
                  if(result.status == 1) {
                      return dialog.success(result.message, '/admin/article.php');
                  }
              }
          });
      });

  后台php:

if (empty($_POST['title'])) {
    return show(0, '请输入标题');
}
if (empty($_POST['cateid'])) {
    return show(0, '请选择分类');
}
if (!empty($_FILES['fileArray']['error'])) {
    return show(0, '请上传图片');
}
if (empty($_POST['content'])) {
    return show(0, '请输入内容');
}
//图片上传
 //获取图片扩展名
  preg_match('|\.(\w+)$|', $_FILES['file']['name'],$ext);
 //获取上传临时文件
  $temp_file =  $_FILES['file']['tmp_name'];
  //随机文件名
  $target_file = '../public/static/upload/'.date('Ymd').'/'.time().rand(100000,999999).$ext[0];
  //上传图片路径
  $dir = iconv("UTF-8","GBK","../public/static/upload/".date('Ymd'));
  //创建文件和权限
  if(!file_exists($dir)){
      mkdir($dir,0777,true);
  }
  //移动临时文件到上传文件路径
  if(move_uploaded_file($temp_file,$target_file)){
      $img_src = $target_file;
  }else {
        $img_src ='';
    }

$title = trim($_POST['title']);
$cateid = trim($_POST['cateid']);
$imgs =$img_src;
$content = trim($_POST['content']);
$addtime = time();


点击这里复制本文地址 欢迎来到大黄鸡源码分享网
qrcode

大黄鸡源码编程网 © All Rights Reserved.  
网站备案号:闽ICP备18012015号-4
Powered by Z-BlogPHP
联系我们| 关于我们| 广告联系| 网站管理