twitter-bootstrap 如何使用 Jasny 的引导图像预览上传图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14836491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload image with Jasny's bootstrap imagepreview?
提问by Nuri Akman
I'm trying to use Jasny's Bootstrap. This is nice work!
我正在尝试使用 Jasny 的 Bootstrap。这是个好作品！
I coudn't find solution for bootstrap upload image on page http://jasny.github.com/bootstrap/javascript.html#fileupload
我在页面http://jasny.github.com/bootstrap/javascript.html#fileupload上找不到引导上传图像的解决方案
With bootstrap-fileupload.js, how can I upload image using Ajax?
使用 bootstrap-fileupload.js，如何使用 Ajax 上传图片？
回答by Nuri Akman
I asked this question to directly ARNOLD DANIELS who is owner of Jasny's Bootstrap.
我直接向 Jasny's Bootstrap 的所有者 ARNOLD DANIELS 提出了这个问题。
Here is his answer:
这是他的回答：
The whole point of the image preview is that the picture is show right away, without the need to upload it to the server using AJAX. So it stays just a regular form. You can post a form using AJAX http://api.jquery.com/jQuery.post/if needed.
If you do want to upload the image using AJAX and don't want to use a form, checkout http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
图像预览的全部意义在于立即显示图片，无需使用 AJAX 将其上传到服务器。所以它只是一种常规形式。如果需要，您可以使用 AJAX http://api.jquery.com/jQuery.post/发布表单 。
如果您确实想使用 AJAX 上传图像并且不想使用表单， 请查看 http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
I used this sample with removing database releated lines and worked perfectly for me !
我使用此示例删除了与数据库相关的行，并且非常适合我！
回答by Mohammad Anini
First you need to register the css and js files:
首先你需要注册css和js文件：
If you are using Yii Framework:
如果你使用 Yii 框架：
$cs = Yii::app()->clientScript;
$cs->registerCSSFile("/css/fileupload.css");
$cs->registerScriptFile('/js/fileupload.js', CClientScript::POS_END);
Or
或者
<link rel="stylesheet" type="text/css" href="/css/fileupload.css">
<script type="text/javascript" src="/js/fileupload.js"></script>
Then register the following script:
然后注册以下脚本：
$cs->registerScript("imageUpload", "$('.fileupload').fileupload({uploadtype: 'image'});", CClientScript::POS_END) ;
Or
或者
<script type="text/javascript">
$('.fileupload').fileupload({uploadtype: 'image'});
</script>
Then add the following HTML code to your page:
然后将以下 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>
回答by Dan Brown
I came across this question on Google and just wanted to show I did it for anyone else interested (even if it's not the most elegant way)
我在谷歌上遇到了这个问题，只是想表明我是为其他感兴趣的人做的（即使这不是最优雅的方式）
$(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 );
});
})
})
This above piece of code detects when the file input preview has changed. It then finds the base64 data from the image tag, and uses jquery to post it to upload.php.
上面这段代码检测文件输入预览何时发生变化。然后它从图像标签中找到base64 数据，并使用jquery 将其发布到upload.php。
Upload.php simply takes the base64 image data and saves it as an image
Upload.php 只是获取 base64 图像数据并将其保存为图像
$imgdata = $_POST['imgdata'];
$ifp = fopen("newimage.jpg", "wb");
$data = explode(',', $imgdata);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
回答by Carlos
The upload on jasny is more than a preview or client side upload management instead an ajax, probably you need tp use other method or plugin, cause the jasny upload will send the preview path using the binary image displaying
jasny 上传不仅仅是一个预览或客户端上传管理而不是一个ajax，可能你需要tp 使用其他方法或插件，因为jasny 上传会使用二进制图像显示发送预览路径
