WordPress前端如何实现评论图片上传

论坛首页 论坛 寻求帮助 WordPress前端如何实现评论图片上传

标签: 

正在查看 2 条回复
  • 作者
    帖子
    • #21276
      一点优化
      参与者
        @921988379
        楼主
        <?php
        // WordPress environment
        require( dirname(__FILE__) . '/../../../wp-load.php' );
        $wordpress_upload_dir = wp_upload_dir();
        // $wordpress_upload_dir['path'] is the full server path to wp-content/uploads/2020/11, for multisite works good as well
        // $wordpress_upload_dir['url'] the absolute URL to the same folder, actually we do not need it, just to show the link to file
        $i = 1; // number of tries when the file with the same name is already exists
         
        $profilepicture = $_FILES['profilepicture'];
        $new_file_path = $wordpress_upload_dir['path'] . '/' . $profilepicture['name'];
        $new_file_mime = mime_content_type( $profilepicture['tmp_name'] );
         
        if( empty( $profilepicture ) )
               die( 'File is not selected.' );
         
        if( $profilepicture['error'] )
               die( $profilepicture['error'] );
         
        if( $profilepicture['size'] > wp_max_upload_size() )
               die( 'It is too large than expected.' );
         
        if( !in_array( $new_file_mime, get_allowed_mime_types() ) )
               die( 'WordPress doesn't allow this type of uploads.' );
         
        while( file_exists( $new_file_path ) ) {
               $i++;
               $new_file_path = $wordpress_upload_dir['path'] . '/' . $i . '_' . $profilepicture['name'];
        }
         
        // looks like everything is OK
        if( move_uploaded_file( $profilepicture['tmp_name'], $new_file_path ) ) {
               $upload_id = wp_insert_attachment( array(
                      'guid'           => $new_file_path, 
                      'post_mime_type' => $new_file_mime,
                      'post_title'     => preg_replace( '/.[^.]+$/', '', $profilepicture['name'] ),
                      'post_content'   => '',
                      'post_status'    => 'inherit'
               ), $new_file_path );
         
               // wp_generate_attachment_metadata() won't work if you do not include this file
               require_once( ABSPATH . 'wp-admin/includes/image.php' );
         
               // Generate and save the attachment metas into the database
               wp_update_attachment_metadata( $upload_id, wp_generate_attachment_metadata( $upload_id, $new_file_path ) );
         
               // Show the uploaded file in browser
               wp_redirect( $wordpress_upload_dir['url'] . '/' . basename( $new_file_path ) );
        }

        我在网上查到的是这个,但是这个东西放哪里啊?是否还需要别的?

        首先新建个HTML页面,里面写上加载quill前端编辑器的基本代码,直接参考quill官网的开发文档快速接入步骤说明即可。我这里就不贴HTML头部和底部了,自己写吧。
        
        引入quill样式
        
        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
        引入quill编辑器的js支持
        
        <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
        quill编辑器加载容器
        
        <div id="editor"></div>
        quill编辑器初始化配置
        
        <script>
        var toolbarOptions = [
          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
          ['blockquote', 'code-block'],
         
          [{ 'header': 1 }, { 'header': 2 }],               // custom button values
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
          [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
          [{ 'direction': 'rtl' }],                         // text direction
         
          [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
         
          [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
          [{ 'font': [] }],
          [{ 'align': [] }],
         ['image', 'video'],
          ['clean']                                         // remove formatting button
        ];
          var quill = new Quill('#editor', {
           modules: {
            toolbar: toolbarOptions
          },
            theme: 'snow'
          });
        </script>
        上面部分只是为了加载quill富文本编辑器而已,现在用浏览器访问下应该可以看到一个完整的富文本编辑器了,下面接着写上传图片的js代码。
        
        
         
        重写编辑器的图片预览方法
        <script>
        var toolbar = quill.getModule('toolbar');
                    toolbar.addHandler('image', function () {
                        var fileInput = this.container.querySelector('input.ql-image[type=file]');
                        if (fileInput == null) {
                            fileInput = document.createElement('input');
                            fileInput.setAttribute('multiple', 'multiple');
                          fileInput.setAttribute('id', 'file');
                          fileInput.setAttribute('type', 'file');
                          fileInput.setAttribute('accept', 'image/*');
                            fileInput.setAttribute('name', 'files[]');
                            fileInput.classList.add('ql-image');
                            fileInput.addEventListener('change', function () {
                                if (fileInput.files != null && fileInput.files[0] != null) {
                                    var formData = new FormData();
                                    formData.append('files', fileInput.files[0]);
                                    $.ajax({
                                    url: '上传图片接口地址',
                                        type: 'POST',
                                        cache: false,
                                        data: formData,
                                        processData: false,
                                        contentType: false
                                    }).done(function (res) {
                                    json1=eval("(" + res + ")");
                                    console.log('>>>>>>'+json1.data.src);
                                        var range = quill.getSelection(true);
                                        quill.insertEmbed(range.index, 'image', json1.data.src);
                                        quill.setSelection(range.index + 1);
                                    }).fail(function (res) {
                                    });
                                }
                            });
                            this.container.appendChild(fileInput);
                        }
                        fileInput.click();
                    });
        </script>
        好了,前端部分结束,下面是PHP实现的WordPress媒体上传接口,注意文件引用路径。
        
        require dirname(__FILE__).'/../../../../wp-load.php';
        //WordPress核心,根目录下,自己换
        $file = $_FILES['files'];
        if ( !empty( $file ) ) {
        // 获取上传目录信息
        $wp_upload_dir = wp_upload_dir();
        // 将上传的图片文件移动到上传目录
        $basename = $file['name'];
        $filename = $wp_upload_dir['path'] . '/' . $basename;
        $re = rename( $file['tmp_name'], $filename );
        $attachment = array(
        'guid' => $wp_upload_dir['url'] . '/' . $basename,
        'post_mime_type' => $file['type'],
        'post_title' => preg_replace( '/.[^.]+$/', '', $basename ),
        'post_content' => '',
        'post_status' => 'inherit'
        );
        $attach_id = wp_insert_attachment( $attachment, $filename );
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        $attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
        wp_update_attachment_metadata( $attach_id, $attach_data );
        $re = array('code'=>0,'msg'=>'上传成功','data'=>array('src'=>wp_get_attachment_url( $attach_id ),'title'=>''));
        print_r(json_encode($re));
        }

        第二个版本是这样的

      • #21280
        孙锡源
        管理员
          @ibadboy
          坏蛋的博客
          ibadboy.net

          注意这段代码第三行,它完整的加载了整个WordPress框架,所以说这个文件是一个独立的入口。

          你只需要创建一个新文件,然后把代码贴进去即可,记得把wp-load.php的加载路径改对。

          之后就是把你前端的图片上传接口改成这个文件的URL就可以了。

          • #21293
            一点优化
            参与者
              @921988379
              楼主

              姐妹    那我怎么把这个功能并到主题里面啊

              • #21301
                孙锡源
                管理员
                  @ibadboy
                  坏蛋的博客
                  ibadboy.net

                  我只能给你说整体思路,不提供手把手开发教学。思路也就是前面提到的了。

                  • #21304
                    一点优化
                    参与者
                      @921988379
                      楼主

                      放进函数文件可不可以

                • #21294
                  一点优化
                  参与者
                    @921988379
                    楼主

                    你这个主题前端的编辑器怎么弄的啊

                    • #21302
                      孙锡源
                      管理员
                        @ibadboy
                        坏蛋的博客
                        ibadboy.net

                        这个是BBPress自带的

                        • #21305
                          一点优化
                          参与者
                            @921988379
                            楼主

                            啥事BBPress?你这litepress?

                    • #21306
                      孙锡源
                      管理员
                        @ibadboy
                        坏蛋的博客
                        ibadboy.net

                        放函数文件里不行。前面说了你贴的代码是一个单独的程序入口。

                        BBPress是WordPress下的论坛插件,LitePress的论坛是基于它做的。

                        • #21308
                          一点优化
                          参与者
                            @921988379
                            楼主

                            好嘞   谢谢姐妹

                      正在查看 2 条回复
                      • 哎呀,回复话题必需登录。