Question

我正在尝试使用Jasny的Bootstrap。这是件好事！

我无法在页面http://jasny.github.com/bootstrap/javascript.html#fileupload

上找到引导程序上传图片的解决方案

使用bootstrap-fileupload.js，如何使用Ajax上传图像？

Answer 1

我直接向ARNOLD DANIELS提出这个问题，他是Jasny's Bootstrap的老板。

以下是他的回答：

图像预览的重点是图片显示正确   离开，无需使用AJAX将其上传到服务器。所以   只是一种常规形式。您可以使用AJAX发布表单   {}需要http://api.jquery.com/jQuery.post/。

如果您确实想使用AJAX上传图片而不想使用   形式，结帐   http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

我使用此示例删除数据库相关行并为我完美工作！

Answer 2

首先，您需要注册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>

Answer 3

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

$(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 );
  });
   })
})

以上代码检测文件输入预览何时发生变化。然后它从image标签中找到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);

Answer 4

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

如何使用Jasny bootstrap图像预览上传图像？

4 个答案: