Twitterプレビューと進行状況バーでブートストラップ画像をアップロード

Twitterのブートストラップを使用して、プレビューと進行状況バーで1つの画像をアップロードする方法を教えてください。現在のところ、画像を保存するまでは、画像をアップロードするためのプレビューやプログレスバーが表示されません。Twitterプレビューと進行状況バーでブートストラップ画像をアップロード

出典

2012-12-02 azeem

JasnyのBootstrapのフォークは、あなたが近づくことを可能にします。 documentationを参照してください。

コード：

<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>

残念ながら、プログレスバーを持っていないようです。

出典

2012-12-02 03:57:12

こんにちはおかげで...私はすぐに私が選択すると、画像/ファイルをアップロードすることはできますか？ – azeem

ajaxで画像をアップロードするにはどうしたらいいですか？ –

404ページがリンクに見つかりません。 – Clayton

これにより、HTMLブロブ&いるFormDataを使用して直接アップロードする：

// Now, let's do the upload thingy for our beloved image(s)... 
//Bulk Uploading, mannn.... 

$('.btn-upload').on('click', function (evt) { 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 
    fd.append("file", document.getElementById('(your beloved id/class html element)').files[0]); 
    xhr.open("POST", "/(your beloved id/class html element)/", true); 
    xhr.send(fd); 
    xhr.addEventListener("load", function (event) { 
     var parseData = $.parseJSON(event.target.response); 

     location.reload(); 
    }, false); 
}); 
// end of bulk uploading...

出典

2015-10-24 04:18:08

私は受け入れ答えを試してみましたが、それは仕事を得ることができませんでした。

http://plugins.krajee.com/file-inputにプラグインがあります。ブートストラップ3とJQuery 2.1が必要です

デモhereをご覧になり、hereまたはhereのソースを入手してください。ソースには、/examples/フォルダにAJAXのアップロードスキーム、ドラッグ＆ドロップなどの他の例もあります。それはJensyプラグインよりもはるかに汎用性があります。

次のコードは私のウェブサイトで使用しているコードです。 file_path/kartik-v-bootstrap-fileinput-51ddb7c/があなたのマシンに抽出されたソースコードのフォルダがあることに注意してください：

<html> 
<head> 
    <!-- Start of Karthik upload plugin --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="file_path/kartik-v-bootstrap-fileinput-51ddb7c/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput.js" type="text/javascript"></script> 
    <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput_locale_fr.js" type="text/javascript"></script> 
    <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput_locale_es.js" type="text/javascript"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script> 
</head> 

<body> 
    <div class="form-group col-md-6 col-xs-12"> 
    <form> 
    <h2>Upload a picture:</h2> 
     <!-- Source: http://plugins.krajee.com/file-input --> 
     <div class="container kv-main"> 
     <div enctype="multipart/form-data"> 
      <div class="row"> 
      <div class="form-group col-md-6 col-xs-12"> 
       <input id="file-0a" class="file" type="file" multiple data-min-file-count="1"> 
      </div> 
      </div> 
     </div> 
     </div> 
    </form> 
    </div> 
</body> 
<script> 
$('#file-fr').fileinput({ 
    language: 'fr', 
    uploadUrl: '#', 
    allowedFileExtensions: ['jpg', 'png', 'gif'], 
}); 
$('#file-es').fileinput({ 
    language: 'es', 
    uploadUrl: '#', 
    allowedFileExtensions: ['jpg', 'png', 'gif'], 
}); 
$("#file-0").fileinput({ 
    'allowedFileExtensions': ['jpg', 'png', 'gif'], 
}); 
$("#file-1").fileinput({ 
    uploadUrl: '#', // you must set a valid URL here else you will get an error 
    allowedFileExtensions: ['jpg', 'png', 'gif'], 
    overwriteInitial: false, 
    maxFileSize: 1000, 
    maxFilesNum: 10, 
    //allowedFileTypes: ['image', 'video', 'flash'], 
    slugCallback: function(filename) { 
    return filename.replace('(', '_').replace(']', '_'); 
    } 
}); 
/* 
$(".file").on('fileselect', function(event, n, l) { 
    alert('File Selected. Name: ' + l + ', Num: ' + n); 
}); 
*/ 
$("#file-3").fileinput({ 
    showUpload: false, 
    showCaption: false, 
    browseClass: "btn btn-primary btn-lg", 
    fileType: "any", 
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" 
}); 
$("#file-4").fileinput({ 
    uploadExtraData: { 
    kvId: '10' 
    } 
}); 
$(".btn-warning").on('click', function() { 
    if ($('#file-4').attr('disabled')) { 
    $('#file-4').fileinput('enable'); 
    } else { 
    $('#file-4').fileinput('disable'); 
    } 
}); 
$(".btn-info").on('click', function() { 
    $('#file-4').fileinput('refresh', { 
    previewClass: 'bg-info' 
    }); 
}); 
/* 
$('#file-4').on('fileselectnone', function() { 
    alert('Huh! You selected no files.'); 
}); 
$('#file-4').on('filebrowse', function() { 
    alert('File browse clicked for #file-4'); 
}); 
*/ 
$(document).ready(function() { 
    $("#test-upload").fileinput({ 
    'showPreview': false, 
    'allowedFileExtensions': ['jpg', 'png', 'gif'], 
    'elErrorContainer': '#errorBlock' 
    }); 
    /* 
    $("#test-upload").on('fileloaded', function(event, file, previewId, index) { 
     alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name); 
    }); 
    */ 
}); 
</script> 

</html>

あなたはX写真、少なくとも使用のアップロードを確認する場合は、を設定することができます。私は、ファイルやURLの両方から画像をプレビューするjQueryプラグインを作っ

defaultPreviewSettings = { 
     image: {width: "100%", height: "auto"}, 
     html: {width: "213px", height: "160px"}, 
     text: {width: "160px", height: "136px"}, 
     video: {width: "213px", height: "160px"}, 
     audio: {width: "213px", height: "80px"}, 
     flash: {width: "213px", height: "160px"}, 
     object: {width: "160px", height: "160px"}, 
     other: {width: "160px", height: "160px"} 
    };

出典

2016-05-16 05:58:38

：私も個人的にsource/js/fileinput.jsを編集し、previewCacheライン454で次のように設定したいです。しかし、進捗バーはありません（まだ）。

コード：https://github.com/egonolieux/bootstrap-imageupload

デモ：https://egonolieux.github.io/bootstrap-imageupload

出典

2016-08-05 21:56:23