如何使用Jasny的bootstrap imagepreview上傳圖片？

我正在嘗試使用Jasny的Bootstrap。這是很好的工作！如何使用Jasny的bootstrap imagepreview上傳圖片？

我coudn't找到頁面http://jasny.github.com/bootstrap/javascript.html#fileupload

自舉-fileupload.js上引導上傳影像解決方案，我怎麼能使用Ajax上傳圖片？

2013-02-12 Nuri Akman

我直接問了這個問題，直接就是Jasny Bootstrap的擁有者阿諾德丹尼爾。

下面是他的回答：

圖像預覽的整點是，畫面顯示右走，而不需要把它上傳到使用AJAX服務器。所以它只是一個常規的形式。如果需要，您可以使用AJAX http://api.jquery.com/jQuery.post/發佈表單。

如果你想使用AJAX上傳的圖像，並且不希望使用形式，結賬 http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

我用這個樣品與刪除數據庫相關型號的線條和完美的工作對我來說！

來源

2013-02-16 10:55:29

更多信息：http://www.jasny.net/articles/jasny-bootstrap-file-upload-with- existing-file/ – 2013-02-16 23:35:38

「Bootstrap imagepreview」本來比「Bootstrap fileupload」更合適，因爲它無法上傳任何東西...。 – user1728278 2013-10-31 14:21:04

@ user1728278您是對的，因此插件已在v3.0中重命名爲Bootstrap文件輸入。 – 2013-11-27 07:54:04

上jasny上傳比預覽或客戶端上傳管理，而不是一個ajax更多，也許你需要TP使用其他方法或插件，導致jasny上傳將使用二進制圖像顯示發送預覽路徑

來源

2013-02-13 00:07:06 Carlos

首先，你需要註冊的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-17 16:57:48

我遇到了在谷歌這個問題，只是想表明我是爲了其他任何人有興趣的（即使它不是最優雅的方式）

$(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-30 14:27:43

如何使用Jasny的bootstrap imagepreview上傳圖片？

回答

相關問題