Wordpress中的前端媒体上传

时间:2012-02-06 13:42:05

标签: php javascript jquery ajax wordpress

我需要一些帮助! :)

我要做的是让用户从前端创建一个帖子。使用预览窗口显示发布时帖子的外观。我已经完成了。现在我试图让用户将图像直接上传到媒体库。一旦用户选择了具有以下代码的文件,就需要进行上传:

 <form method="post" action="#" enctype="multipart/form-data" >
      <input type="file" name="featured_image">
 </form>

我不希望任何页面加载,有没有办法在不使用提交按钮的情况下获取文件? 另外我如何处理实际的文件上传,我的谷歌技能发现了这个功能:

function insert_attachment($file_handler,$post_id,$setthumb='false') {

  // check to make sure its a successful upload
  if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();

  require_once(ABSPATH . "wp-admin" . '/includes/image.php');
  require_once(ABSPATH . "wp-admin" . '/includes/file.php');
  require_once(ABSPATH . "wp-admin" . '/includes/media.php');

  $attach_id = media_handle_upload( $file_handler, $post_id );

  if ($setthumb) update_post_meta($post_id,'_thumbnail_id',$attach_id);
 return $attach_id;
}

但是这个函数将上传挂钩到帖子,我只是希望它直接进入库而不连接到帖子。另外我假设$ file_handler是表单的名称?我还假设$ _FILES不存在,除非用户点击了提交按钮。

我离这儿很远,说出我的屁股。所以任何帮助都会受到关注。有没有可用的WP-gurus? :d

3 个答案:

答案 0 :(得分:4)

我遇到了同样的问题。 Wordpress文档有助于: http://codex.wordpress.org/Function_Reference/wp_handle_upload http://codex.wordpress.org/Function_Reference/wp_insert_attachment

UPDATE:$ key是type =“file”的名称

我刚刚添加了guid值,因为它似乎没有被添加(也许有更好的方法,然后包括admin.php:

        require_once(ABSPATH . 'wp-admin/includes/admin.php');
        // step one upload file to server
        $file_return = wp_handle_upload($_FILES[$key], array('test_form' => false));

        if(isset($file_return['error']) || isset($file_return['upload_error_handler'])) {
            echo 'not working again :(';
        }
        else {
            /**
             * See http://codex.wordpress.org/Function_Reference/wp_insert_attachment
             * 
             */
            $filename = $file_return['file'];

            $attachment = array(
                'post_mime_type' => $file_return['type'],
                'post_title' => preg_replace('/\.[^.]+$/', '', basename($filename)),
                'post_content' => '',
                'post_status' => 'inherit',
                'guid' => $file_return['url']
            );
            $attach_id = wp_insert_attachment( $attachment, $file_return['url'] );
            // you must first include the image.php file
            // for the function wp_generate_attachment_metadata() to work
            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 );

        }


    }

答案 1 :(得分:1)

好的,我正在前进。我现在正在使用这个jquery插件进行图片上传 - &gt; http://lagoscript.org/jquery/upload

哪个非常轻巧,效果很好。将图像上传到我的电脑而不刷新。它将文件保存在我的服务器上的临时目录中,我现在打算以某种方式将此图像注入媒体库(然后将其从临时文件夹中删除),但这似乎比它应该更难。

有没有什么方法可以使用php-code将图像添加到媒体库,只使用图片网址? 我似乎无法找到一个,但由于WP已经在管理区域中具有此功能,因此必须有一种方法。

最简单的方法似乎只是创建一个自定义字段来存储该帖子的图像,但我真的希望能够使用WPs缩略图功能,不仅用于循环,还用于调整大小等。

任何指针?

答案 2 :(得分:-1)

我正在使用此代码正常工作

的javascript

<script src="<?php bloginfo( 'template_url' ); ?>/image_file/jquery.ui.widget.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/image_file/jquery.iframe-transport.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/image_file/jquery.fileupload.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/image_file/jquery.fileupload-validate.js"></script>

<script>

$(function () {
    'use strict';

    var url =  '<?php bloginfo( 'template_url' ); ?>/upload.php';
    $('#fileupload').fileupload({


         add: function(e, data) {
                var uploadErrors = [];

                if(data.originalFiles[0]['size'] > 2000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {

                    $("#errormessage").show();
                    $("#errormessage").html(uploadErrors.join("\n"));

                } else {
                    data.submit();
                    $("#errormessage").hide();
                }
        },


        url: url,
        dataType: 'json',

        done: function (e, data) {


             if(data._response.result.response=="errortype"){
                 $("#errormessage").show();
                $("#errormessage").html("Not an accepted file type ");
                $("#progress").hide();
             }
             else 
             {
                  $("#progress").show(); 
                  var url=data._response.result.upload_info.url;
                 if(url=='')
                    {

                    }
                   $("#file_url").val(url);


                     }



        },
        progressall: function (e, data) {

            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').html( progress + '%');
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

HTML

&LT;

span class="input__label-content input__label-content--akira" >UPLOAD A PHOTO OF YOUR RECEIPT**</span>
               <span id="fileupload"> <input type="file" name="upload_file" multiple></span>

    </span>

    <input type="hidden" name="file_url" value="" id="file_url" />

upload.php

<?php

    require("../../../wp-load.php");
    global $wpdb;
    if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );
$uploadedfiles = $_FILES['upload_file'];

if(strtolower($uploadedfiles['type'])=='image/jpeg' || strtolower($uploadedfiles['type'])=='image/gif' || strtolower($uploadedfiles['type'])=='image/png' || strtolower($uploadedfiles['type'])=='image/pjpeg' || strtolower($uploadedfiles['type'])=='image/x-png'){
//

$upload_overrides = array( 'test_form' => false );
$results=array();


  if ($uploadedfiles['name']) {
    $file = array(
      'name'     => $uploadedfiles['name'],
      'type'     => $uploadedfiles['type'],
      'tmp_name' => $uploadedfiles['tmp_name'],
      'error'    => $uploadedfiles['error'],
      'size'     => $uploadedfiles['size']
    );


    $movefile = wp_handle_upload( $file, $upload_overrides );

  if ( $movefile ) {

       $data=array('result'=>'success','upload_info'=>$movefile);

       $filename = $movefile['upload_file']['file'];

      $filetype = wp_check_filetype( basename( $filename ), null );



      $wp_upload_dir = wp_upload_dir();


      $attachment = array(
        'guid'           => $wp_upload_dir['url'] . '/' . basename( $filename ), 
        'post_mime_type' => $filetype['type'],
        'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
        'post_content'   => '',
        'post_status'    => 'inherit'
      );

      $attach_id = wp_insert_attachment( $attachment, $filename, $id );


      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 );



  } else {
      $data=array('result'=>'error','upload_info'=>null);
  }

  $data['request']=$_FILES;

  }
}
else 
{
    $data=array('response'=>'errortype','upload_info'=>null);
}

    echo json_encode($data);


?>