如何用Jasny'；上传图片；的引导程序图像预览

我直接向阿诺德·丹尼尔斯提出了这个问题，他是Jasny Bootstrap的所有者。

以下是他的答案：

图像预览的要点是图片显示正确不需要使用AJAX将其上传到服务器。所以保持为常规表单。您可以使用AJAX发布表单http://api.jquery.com/jQuery.post/如果需要。

如果您确实想使用AJAX上传图像，并且不想使用表单，签出http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

我用这个例子删除了数据库相关的行，非常适合我！

首先需要注册css和js文件：

如果您正在使用Yii Framework：

$cs = Yii::app()->clientScript;
$cs->registerCSSFile("/css/fileupload.css");
$cs->registerScriptFile('/js/fileupload.js', CClientScript::POS_END);

或

<link rel="stylesheet" type="text/css" href="/css/fileupload.css">
<script type="text/javascript" src="/js/fileupload.js"></script>

然后注册以下脚本：

$cs->registerScript("imageUpload", "$('.fileupload').fileupload({uploadtype: 'image'});", CClientScript::POS_END) ;

或

<script type="text/javascript">
$('.fileupload').fileupload({uploadtype: 'image'});
</script>

然后将以下HTML代码添加到您的页面：

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

我在谷歌上遇到了这个问题，只是想证明我是为其他感兴趣的人做的（即使这不是最优雅的方式）

$(document).ready(function(){
$('.fileinput-preview').bind('DOMNodeInserted', function(event) {
    var imgdata = ($('.fileinput-preview img').attr('src'));
    $.post( "upload.php", { imgdata: imgdata})
    .done(function( data ) {
    alert( "Data Loaded: " + data );
  });
   })
})

上面的这段代码检测文件输入预览何时发生更改。然后，它从图像标签中找到base64数据，并使用jquery将其发布到upload.php。

Upload.php只需获取base64图像数据并将其保存为图像

$imgdata = $_POST['imgdata'];
$ifp = fopen("newimage.jpg", "wb"); 
$data = explode(',', $imgdata);
fwrite($ifp, base64_decode($data[1])); 
fclose($ifp); 

jasny上的上传不仅仅是预览或客户端上传管理，而是ajax，可能你需要使用其他方法或插件，因为jasny上传会使用显示的二进制图像发送预览路径