1、新建att-upload.php 文件放入主题目录,代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?php if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) { header('Allow: POST'); header('HTTP/1.1 405 Method Not Allowed'); header('Content-Type: text/plain'); exit; } require dirname(__FILE__).'/../../../../wp-load.php'; // 根据文件位置修改路径,我放置在主题目录的 /inc 文件夹内 nocache_headers(); $extArr = array("jpg", "png", "jpeg"); $file = $_FILES['files']; if ( !empty( $file ) ) { $wp_upload_dir = wp_upload_dir(); // 获取上传目录信息 $basename = $file['name']; $basesize = $file['size']; $baseext = pathinfo($basename, PATHINFO_EXTENSION); /* 使用前台 js 判断 if (!in_array($baseext, $extArr)) { echo '{"status":3,"msg":"图片类型只能是jpeg,jpg,png!"}'; exit(); } if ($basesize > (1000 * 1024)) { echo '{"status":3,"msg":"图片大小不能超过1M"}'; exit(); } */ $dataname = date("YmdHis_").substr(md5(time()), 0, 8) . '.' . $baseext; $filename = $wp_upload_dir['path'] . '/' . $dataname; rename( $file['tmp_name'], $filename ); // 将上传的文件移动到上传目录 $attachment = array( 'guid' => $wp_upload_dir['url'] . '/' . $dataname, // 外部链接的 url 'post_mime_type' => $file['type'], // 文件 mime 类型 'post_title' => preg_replace( '/\.[^.]+$/', '', $basename ), // 附件标题,采用去除扩展名之后的文件名 'post_content' => '', // 文章内容,留空 'post_status' => 'inherit' ); $attach_id = wp_insert_attachment( $attachment, $filename ); // 插入附件信息 if($attach_id != 0){ require_once( ABSPATH . 'wp-admin/includes/image.php' ); // 确保包含此文件,因为wp_generate_attachment_metadata()依赖于此文件。 $attach_data = wp_generate_attachment_metadata( $attach_id, $filename ); wp_update_attachment_metadata( $attach_id, $attach_data ); // 生成附件的元数据,并更新数据库记录。 // 返回消息至前端 print_r(json_encode(array('status'=>1,'msg'=>'附件添加成功','data'=>array('src'=>wp_get_attachment_url( $attach_id ),'title'=>time())))); exit(); }else{ echo '{"status":4,"msg":"附件上传失败!"}'; exit(); } } |
2、前端投稿页面添加上传input表单
如果需要上传多类图片,请修改 input 的 data-type 属性
1 | <input type="file" id="upload_ico" data-type="sites_ico" accept="image/*" onchange="uploadImg(this)" > |
3、前端投稿页面添加JS
下方包含主要结构,需自行添加提示方法和上传成功后的方法,如果不需要这两个功能,可以不添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script> function uploadImg(file) { var doc_id=file.getAttribute("data-type"); if (file.files != null && file.files[0] != null) { if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.files[0].name)) { showAlert(JSON.parse('{"status":3,"msg":"图片类型只能是jpeg,jpg,png!"}')); return false; } if(file.files[0].size > (1000 * 1024)){ showAlert(JSON.parse('{"status":3,"msg":"图片大小不能超过1M"}')); return false; } var formData = new FormData(); formData.append('files', file.files[0]); $.ajax({ url: 'att-upload.php文件地址', type: 'POST', cache: false, data: formData, dataType: 'json', processData: false, contentType: false }).done(function (result) { showAlert(result); if(result.status == 1){ //上传成功处理方法,可以将图片显示在前端 div 内。 } }).fail(function (result) { showAlert(JSON.parse('{"status":3,"msg":"网络连接错误!"}')); }); }else{ showAlert(JSON.parse('{"status":2,"msg":"请选择文件!"}')); return false; } } function showAlert(data) { //提示信息处理并显示 } </script> |
原文链接:https://xiaohost.com/3623.html,转载请注明出处。
评论0