5

我正在尝试使用 Jasny 的 Bootstrap。这是个好作品！

我在http://jasny.github.com/bootstrap/javascript.html#fileupload页面上找不到引导上传图像的解决方案

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

4

4 回答 4

8

我直接向 Jasny's Bootstrap 的所有者 ARNOLD DANIELS 提出了这个问题。

这是他的回答：

图片预览的重点是图片立即显示，无需使用AJAX将其上传到服务器。所以它只是一个常规的形式。如果需要，您可以使用 AJAX http://api.jquery.com/jQuery.post/发布表单。

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

我使用此示例删除了与数据库相关的行，并且对我来说非常有效！

于 2013-02-16T10:55:29.607 回答
3

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

如果你使用 Yii 框架：

$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>
于 2013-04-17T16:57:48.920 回答
1

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

$(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);
于 2015-07-30T14:27:43.903 回答
0

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

于 2013-02-13T00:07:06.817 回答