原生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();