5

JasnyのBootstrapを使用しようとしています。これはいい仕事です！

http://jasny.github.com/bootstrap/javascript.html#fileuploadページにブートストラップアップロードイメージの解決策が見つかりません

bootstrap-fileupload.jsで、Ajaxを使用して画像をアップロードするにはどうすればよいですか？

4

4 に答える 4

8

Jasny'sBootstrapの所有者であるARNOLDDANIELSに直接この質問をしました。

これが彼の答えです：

画像プレビューの要点は、AJAXを使用してサーバーに画像をアップロードしなくても、画像がすぐに表示されることです。したがって、それは通常の形式のままです。必要に応じて、AJAXhttp ://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 に答える