从前端上传图片并获取其网址答案

【问题标题】：Upload Image from front-end and get its url从前端上传图片并获取其网址
【发布时间】：2013-06-25 10:31:23
【问题描述】：

嗨，我正在从前端上传文件，但现在代码只获取图像附件 ID，我想获取图像 url。

   function agp_process_woofile($file, $post_id){

     if ($_FILES[$file]['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');

    $attachment_id = media_handle_upload($file, $post_id);

  add_post_meta($post_id, '_file_paths', $attachment_id);

  $attachment_data = array(
    'ID' => $attachment_id,
    'post_excerpt' => $caption
  );

  wp_update_post($attachment_data);

  return $attachment_id;

}

查看 attachment_id 我想从此函数获取 url 并将该 url 更新为 "_file_paths" post meta

【问题讨论】：

是否正确 $attachment_id = media_handle_upload($file, $post_id); $attachment_url = wp_get_attachment_url($attachment_id); add_post_meta($post_id, '_file_paths', $attachment_url);
你自己写代码吗？您的代码中没有获取附件 URL 的代码。

标签： wordpress upload

【解决方案1】：

对于在前端上传图片只需创建简单的帖子表单

<form method="post" enctype="multipart/form-data">
<input type="file" name="imagefile" />
<input type="submit" name="Submit" value="Submit" />
</form>

提交表单后，将图片作为附件上传到 wordpress 媒体中，如下所示。

if($_POST){
if (!function_exists('wp_generate_attachment_metadata')){
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
}
if($_FILES)
{
    foreach ($_FILES as $file => $array)
    {
        if($_FILES[$file]['error'] !== UPLOAD_ERR_OK){return "upload error : " . $_FILES[$file]['error'];}//If upload error
        $attach_id = media_handle_upload($file,$new_post);
        echo wp_get_attachment_url($attach_id);//upload file URL
    }
}
}

【讨论】：

【解决方案2】：

你找到了解决方案，所以和你们分享:)

function agp_process_woofile($files, $post_id, $caption){


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

    $attachment_id = media_handle_upload($files, $post_id);

 $attachment_url = wp_get_attachment_url($attachment_id);
  add_post_meta($post_id, '_file_paths', $attachment_url);

    $attachment_data = array(
    'ID' => $attachment_id,
    'post_excerpt' => $caption
  );

  wp_update_post($attachment_data);

  return $attachment_id;

}

【讨论】：

【解决方案3】：

使用默认的wordpress函数wp_handle_upload请参考 http://codex.wordpress.org/Function_Reference/wp_handle_upload

这里是我的示例代码：

上传.html

<form action="" enctype="multipart/form-data" id="form" method="post" name="form">
<div id="upload">
<input id="file" name="file" type="file">
</div>
<input id="submit" name="submit" type="submit" value="Upload">
</form>

<div id="detail">
<div id="preview" style="height:100px;width:100px; display:none">
<img id="previewimg" src="" style="height:100px;width:100px;">
<img id="deleteimg"    src="<?php echo plugins_url( '/images/remove.png'__FILE__);?>">
</div>

<div id="message">
<?php include "Function /upload.php";?> 
</div>
</div>

上传.php

<?php
include_once ABSPATH . 'wp-admin/includes/media.php';
include_once ABSPATH . 'wp-admin/includes/file.php';
include_once ABSPATH . 'wp-admin/includes/image.php';
require_once (ABSPATH . 'wp-includes/pluggable.php');
if (isset ( $_POST ['submit'] )) {
    if (! function_exists ( 'wp_handle_upload' ))
        require_once (ABSPATH . 'wp-admin/includes/file.php');
    $uploadedfile = $_FILES ['file'];
    if (! empty ( $uploadedfile ['name'] )) {
        $upload_overrides = array (
            'test_form' => false 
        );
        $movefile = wp_handle_upload ( $uploadedfile, $upload_overrides );
        if ($movefile) {
            echo "File is valid, and was successfully uploaded.\n";
        } else {
            echo "Possible file upload attack!\n";
        }
    } else {
        echo "Please select the image to upload";
    }
}
?>

上传.js `

 jQuery(document).ready(function() {
     // Function for Preview Image.
     jQuery(function() {
         jQuery(":file").change(function() {

             if (this.files && this.files[0]) {
                 var reader = new FileReader();
                 reader.onload = imageIsLoaded;
                 reader.readAsDataURL(this.files[0]);
             }
         });
     }); 
     function imageIsLoaded(e) {
         jQuery('#message').css("display", "none");
         jQuery('#preview').css("display", "block");
         jQuery('#previewimg').attr('src', e.target.result);
     };
     // Function for Deleting Preview Image.
     jQuery("#deleteimg").click(function() {
         jQuery('#preview').css("display", "none");
         jQuery('#file').val("");
     });
     // Function for Displaying Details of Uploaded Image.
     jQuery("#submit").click(function() {
         jQuery('#preview').css("display", "none");
         jQuery('#message').css("display", "block");
     });
 });`

【讨论】：