Bootstrap File İnput - Multi File İnput

Evet arkadaşlar bir projemin bir yerinde çoklu dosya yükleme olayını araştırıyordum. Bootstrap ın bir tasarımını buldum. Daha yeni deniyeceğim. İşe yararsa çok güzel bir görüntüsü var. Buradan sizlerlede paylaşacağım..

Proje Krajee den indirmiş bulunmaktayım. Projem bitince size de bir link oluştururum.

İndirme Linki: (Daha Sonra Paylaşacağım..)

Kısaca burada bir açıklama yapacağım. Tasarımda bootstrap kullanıyorum. Ve .Net yazmaktayım. Multi File gerekti. Araştırmaya başladım. Ve bu eklentiyle karşılaştırdım. Ekran görüntüsünüde sonra alacağım ama buraya şimdi kodları yazmam gerekiyor. Çünkü not defteri olarak burayı kullandıgım için sonra unuttursam buradan bakacağım.

Head kısmına gerekli olan dosyalarımızı yükledikten sonra sayfaya çağırıyoruz.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="../js/fileinput.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>

Body kısmına baktım bir çok seçenekli dosya yükleme seçenekleri var. Misal tek yükleme, çoklu yükleme, yüklenenleri gösterme, gösterilen yüklemeleri silme, yüklenen verileri tekrar yüklemelerde silip yenilerini yükleme veya yüklenen verileri artı olarak yeni eklenenleri ekleme gibi.

Bir çok seçeneklerin kodlarını hepsini tam olarak ayırmadım ama buradan hepsini yazacağım. Daha sonrada ayırırız.

1.Kod

<input id="file-0" class="file" type="file" multiple data-min-file-count="1">

2.Kod

<input id="file-0a" class="file" type="file" multiple data-min-file-count="3">

3.Kod

<input id="file-0b" class="file" type="file">

4.Kod

<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"> 

5.Kod

<input id="file-2" type="file" class="file" readonly data-show-upload="false">

6.Kod (Ön izlemeli)

<input id="file-3" type="file" multiple=true> 

7.Kod

 <input id="file-4" type="file" class="file" data-upload-url="#">

8.Kod

<input type="file" class="file" id="test-upload" multiple>

9.Kod

<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-preview-file-icon="">

Bunlar File Upload kodlarıydı. Sayfanın altında son olarak ufak bir script kodu da bulunmakta..

<script>
    $("#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> 

Evet arkadaşlar şimdilik bu kadar..