web-dev-qa-db-ja.com

プレビュー付きのフロントエンドイメージアップロード - これはWPで可能ですか？

フロントエンドフォームを作成し、いくつかの画像アップロードフィールドを用意しました。投稿を作成して画像を添付することができました。しかし、私がやりたいことは、投稿を送信する前に、アップロードしようとしている画像のプレビューをユーザーに表示させることです。

私はかなりの数の選択肢、Uploadify、Valums.com http://valums.com/ajax-upload 、SWFupload、その他いくつかの私を読みました。覚えてないしかし、それらすべての問題は、私が一度フォームにそれらを実装すると、画像はもはや投稿に添付されず、サーバーにアップロードされるだけであるということです。

これを行うために使用できる提案やコードサンプルはありますか？私は答えを探してネットを探しました - おそらくWPで画像をプレビューし、それを1つの形式で投稿に添付することは不可能です。

uploadsimages
2
user7481

このスクリプトをヘッダーに追加するだけです

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
   var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
     function readURL(input) {
       if (input.files && input.files[0]) {
        var reader = new FileReader();

         reader.onload = function (e) {
           $('#img_prev')
           .attr('src', e.target.result)
           .height(100);
         };

        reader.readAsDataURL(input.files[0]);
    }
      else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>

Internet Explorerに追加します。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ヘッダーにスタイルを追加します。

<style>
 article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
 #x { display:none; position:relative; z-index:200; float:right}
 #previewPane { display: inline-block; }
</style>

これはそのページまたはurテーマのヘッダに追加されるべきであり、これはプレビュー付きのアップロードバーになります。

<input type='file' onchange="readURL(this);" /><br/>


<span id="previewPane">
 img id="img_prev" src="#" alt="your image" />
 span id="x">[X]</span> </div> </div>
3
vaibhav