前端图像上传与预览-这是可能的可湿性粉剂?

时间:2011-07-31 作者:user7481

我创建了一个前端表单,并有几个图像上载字段。我能够创建一个帖子并附上图片。但我想做的是让用户在提交帖子之前看到他们将要上传的图像的预览。

我读过不少备选方案,上传,增值。com公司http://valums.com/ajax-upload, SWFupload和其他一些我不记得了。但所有这些的问题是,一旦我在表单中实现了它们,图像就不再附加到帖子上,而只是上传到服务器上。

有什么建议或代码示例我可以用来做这件事吗?我在网上搜索了一个答案——也许在WP中预览一张图片并以一种形式将其附加到帖子是不可能的?

1 个回复
SO网友:vaibhav

只需在标题中添加此脚本

<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>
请注意,这应该添加到该页面的页眉或主题中,并且这将与预览一起上载。您也可以使用此取消预览

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

结束

相关推荐

images are broken

我有一段代码,用于显示来自RSS提要的每篇帖子上的图像,这些图像将从yahoo images search获取,我将把这段代码粘贴到我的单曲中。php文件,这样它就会出现在我的帖子之后,我在其中一个网站上找到了这段代码,这段代码用于获取图像,但不是从yahoo获取图像,而是从不同的feed获取图像我使用的代码如下:- <?php include_once(ABSPATH.WPINC.\'/rss.php\'); // path to include script $f