css - ट्विटर बूटस्ट्रैप फॉर्म फ़ाइल तत्व अपलोड बटन




forms twitter-bootstrap (16)

एकाधिक अपलोड के लिए समाधान

मैंने एकाधिक अपलोड को शामिल करने के लिए पिछले दो उत्तरों को tweaked। इस तरह लेबल लेबल नाम दिखाता है, अगर केवल एक चुना जाता है, या विपरीत x files में x files

<label class="btn btn-primary" for="my-file-selector">
    <input id="my-file-selector" type="file" multiple="multiple" style="display:none"
        onchange="$('#upload-file-info').html(
            (this.files.length > 1) ? this.files.length + ' files' : this.files[0].name)">                     
    Files&hellip;
</label>
<span class='label label-info' id="upload-file-info"></span>

यह बटन टेक्स्ट और कक्षा को बदलने के लिए भी लागू हो सकता है।

<label class="btn btn-primary" for="multfile">
    <input id="multfile" type="file" multiple="multiple" style="display:none"
        onchange="$('#multfile-label').html(
            (this.files.length == 1) ? this.files[0].name : this.files.length + ' files');
            $(this).parent().addClass('btn-success')">
    <span id="multfile-label">Files&hellip;</span>
</label>

ट्विटर बूटस्ट्रैप के लिए एक फैंसी फ़ाइल तत्व अपलोड बटन क्यों नहीं है? अगर अपलोड बटन के लिए नीला प्राथमिक बटन लागू किया गया तो यह मीठा होगा। सीएसएस का उपयोग कर अपलोड बटन को फैन करना भी संभव है? (एक मूल ब्राउज़र तत्व की तरह लगता है जिसे छेड़छाड़ नहीं किया जा सकता है)


/ * * बूटस्ट्रैप 3 फाइलस्टाइल * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * कॉपीराइट (सी) 2013 मार्कस विनीसियस दा सिल्वा लीमा * पाउलो हेनरिक फॉक्सर द्वारा अपडेट बूटस्ट्रैप 3 * संस्करण 2.0.0 * लाइसेंस प्राप्त एमआईटी लाइसेंस के तहत। * * /

(function ($) {
"use strict";

var Filestyle = function (element, options) {
    this.options = options;
    this.$elementFilestyle = [];
    this.$element = $(element);
};

Filestyle.prototype = {
    clear: function () {
        this.$element.val('');
        this.$elementFilestyle.find(':text').val('');
    },

    destroy: function () {
        this.$element
            .removeAttr('style')
            .removeData('filestyle')
            .val('');
        this.$elementFilestyle.remove();
    },

    icon: function (value) {
        if (value === true) {
            if (!this.options.icon) {
                this.options.icon = true;
                this.$elementFilestyle.find('label').prepend(this.htmlIcon());
            }
        } else if (value === false) {
            if (this.options.icon) {
                this.options.icon = false;
                this.$elementFilestyle.find('i').remove();
            }
        } else {
            return this.options.icon;
        }
    },

    input: function (value) {
        if (value === true) {
            if (!this.options.input) {
                this.options.input = true;
                this.$elementFilestyle.prepend(this.htmlInput());

                var content = '',
                    files = [];
                if (this.$element[0].files === undefined) {
                    files[0] = {'name': this.$element[0].value};
                } else {
                    files = this.$element[0].files;
                }

                for (var i = 0; i < files.length; i++) {
                    content += files[i].name.split("\\").pop() + ', ';
                }
                if (content !== '') {
                    this.$elementFilestyle.find(':text').val(content.replace(/\, $/g, ''));
                }
            }
        } else if (value === false) {
            if (this.options.input) {
                this.options.input = false;
                this.$elementFilestyle.find(':text').remove();
            }
        } else {
            return this.options.input;
        }
    },

    buttonText: function (value) {
        if (value !== undefined) {
            this.options.buttonText = value;
            this.$elementFilestyle.find('label span').html(this.options.buttonText);
        } else {
            return this.options.buttonText;
        }
    },

    classButton: function (value) {
        if (value !== undefined) {
            this.options.classButton = value;
            this.$elementFilestyle.find('label').attr({'class': this.options.classButton});
            if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
                this.$elementFilestyle.find('label i').addClass('icon-white');
            } else {
                this.$elementFilestyle.find('label i').removeClass('icon-white');
            }
        } else {
            return this.options.classButton;
        }
    },

    classIcon: function (value) {
        if (value !== undefined) {
            this.options.classIcon = value;
            if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
                this.$elementFilestyle.find('label').find('i').attr({'class': 'icon-white '+this.options.classIcon});
            } else {
                this.$elementFilestyle.find('label').find('i').attr({'class': this.options.classIcon});
            }
        } else {
            return this.options.classIcon;
        }
    },

    classInput: function (value) {
        if (value !== undefined) {
            this.options.classInput = value;
            this.$elementFilestyle.find(':text').addClass(this.options.classInput);
        } else {
            return this.options.classInput;
        }
    },

    htmlIcon: function () {
        if (this.options.icon) {
            var colorIcon = '';
            if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) {
                colorIcon = ' icon-white ';
            }

            return '<i class="'+colorIcon+this.options.classIcon+'"></i> ';
        } else {
            return '';
        }
    },

    htmlInput: function () {
        if (this.options.input) {
            return '<input type="text" class="'+this.options.classInput+'" style="width: '+this.options.inputWidthPorcent+'% !important;display: inline !important;" disabled> ';
        } else {
            return '';
        }
    },

    constructor: function () {
        var _self = this,
            html = '',
            id = this.$element.attr('id'),
            files = [];

        if (id === '' || !id) {
            id = 'filestyle-'+$('.bootstrap-filestyle').length;
            this.$element.attr({'id': id});
        }

        html = this.htmlInput()+
             '<label for="'+id+'" class="'+this.options.classButton+'">'+
                this.htmlIcon()+
                '<span>'+this.options.buttonText+'</span>'+
             '</label>';

        this.$elementFilestyle = $('<div class="bootstrap-filestyle" style="display: inline;">'+html+'</div>');

        var $label = this.$elementFilestyle.find('label');
        var $labelFocusableContainer = $label.parent();

        $labelFocusableContainer
            .attr('tabindex', "0")
            .keypress(function(e) {
                if (e.keyCode === 13 || e.charCode === 32) {
                    $label.click();
                }
            });

        // hidding input file and add filestyle
        this.$element
            .css({'position':'absolute','left':'-9999px'})
            .attr('tabindex', "-1")
            .after(this.$elementFilestyle);

        // Getting input file value
        this.$element.change(function () {
            var content = '';
            if (this.files === undefined) {
                files[0] = {'name': this.value};
            } else {
                files = this.files;
            }

            for (var i = 0; i < files.length; i++) {
                content += files[i].name.split("\\").pop() + ', ';
            }

            if (content !== '') {
                _self.$elementFilestyle.find(':text').val(content.replace(/\, $/g, ''));
            }
        });

        // Check if browser is Firefox
        if (window.navigator.userAgent.search(/firefox/i) > -1) {
            // Simulating choose file for firefox
            this.$elementFilestyle.find('label').click(function () {
                _self.$element.click();
                return false;
            });
        }
    }
};

var old = $.fn.filestyle;

$.fn.filestyle = function (option, value) {
    var get = '',
        element = this.each(function () {
            if ($(this).attr('type') === 'file') {
                var $this = $(this),
                    data = $this.data('filestyle'),
                    options = $.extend({}, $.fn.filestyle.defaults, option, typeof option === 'object' && option);

                if (!data) {
                    $this.data('filestyle', (data = new Filestyle(this, options)));
                    data.constructor();
                }

                if (typeof option === 'string') {
                    get = data[option](value);
                }
            }
        });

    if (typeof get !== undefined) {
        return get;
    } else {
        return element;
    }
};

$.fn.filestyle.defaults = {
    'buttonText': 'Escolher arquivo',
    'input': true,
    'icon': true,
    'inputWidthPorcent': 65,
    'classButton': 'btn btn-primary',
    'classInput': 'form-control file-input-button',
    'classIcon': 'icon-folder-open'
};

$.fn.filestyle.noConflict = function () {
    $.fn.filestyle = old;
    return this;
};

// Data attributes register
$('.filestyle').each(function () {
    var $this = $(this),
        options = {
            'buttonText': $this.attr('data-buttonText'),
            'input': $this.attr('data-input') === 'false' ? false : true,
            'icon': $this.attr('data-icon') === 'false' ? false : true,
            'classButton': $this.attr('data-classButton'),
            'classInput': $this.attr('data-classInput'),
            'classIcon': $this.attr('data-classIcon')
        };

    $this.filestyle(options);
});
})(window.jQuery);

अपलोड बटन शैली के लिए एक दर्द है क्योंकि यह इनपुट शैलियों और बटन नहीं है।

लेकिन आप इस चाल का उपयोग कर सकते हैं:

http://www.quirksmode.org/dom/inputfile.html

सारांश:

  1. एक सामान्य <input type="file"> और इसे position: relative साथ तत्व में रखें position: relative

  2. इस मूल तत्व के लिए, एक सामान्य <input> और एक छवि जोड़ें, जिसमें सही शैलियों हों। इन तत्वों को पूरी तरह से स्थिति दें, ताकि वे <input type="file"> के समान स्थान पर कब्जा कर सकें।

  3. <input type="file"> से 2 के जेड-इंडेक्स को सेट करें ताकि यह स्टाइल इनपुट / छवि के शीर्ष पर स्थित हो।

  4. अंत में, <input type="file"> से 0 की अस्पष्टता सेट करें। <input type="file"> अब प्रभावी रूप से अदृश्य हो जाती है, और शैली इनपुट / छवि चमकती है, लेकिन आप अभी भी "ब्राउज़ करें" पर क्लिक कर सकते हैं "बटन। यदि बटन छवि के शीर्ष पर स्थित है, तो उपयोगकर्ता छवि पर क्लिक करना प्रतीत होता है और सामान्य फ़ाइल चयन विंडो प्राप्त करता है। (ध्यान दें कि आप दृश्यता का उपयोग नहीं कर सकते: छुपा, क्योंकि वास्तव में अदृश्य तत्व अनजान है, और हमें क्लिक करने योग्य रहने की आवश्यकता है)


उपर्युक्त अन्य पदों से कुछ प्रेरणा के साथ, यहां एक पूर्ण समाधान है जो एक फ़ाइल-नियंत्रण क्षेत्र की तरह दिखता है जो एक इनपुट-समूह-एडन के साथ एक स्वच्छ फ़ाइल इनपुट विजेट के लिए है जिसमें वर्तमान फ़ाइल का लिंक शामिल है।

.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for  viewing */
.input-file .input-group-addon { border: 0px; padding: 0px; }
.input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 }
.input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="input-group input-file">
  <div class="form-control">
    <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a>
  </div>
  <span class="input-group-addon">
    <a class='btn btn-primary' href='javascript:;'>
      Browse
      <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());">
    </a>
  </span>
</div>


कोई अतिरिक्त प्लगइन आवश्यक नहीं है, यह बूटस्ट्रैप समाधान मेरे लिए बहुत अच्छा काम करता है:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

डेमो:

http://jsfiddle.net/haisumbhatti/cAXFA/1/ (बूटस्ट्रैप 2)

http://jsfiddle.net/haisumbhatti/y3xyU/ (बूटस्ट्रैप 3)


कोई फैंसी शिज़ आवश्यक नहीं है:

HTML:

<form method="post" action="/api/admin/image" enctype="multipart/form-data">
    <input type="hidden" name="url" value="<%= boxes[i].url %>" />
    <input class="image-file-chosen" type="text" />
    <br />
    <input class="btn image-file-button" value="Choose Image" />
    <input class="image-file hide" type="file" name="image"/> <!-- Hidden -->
    <br />
    <br />
    <input class="btn" type="submit" name="image" value="Upload" />
    <br />
</form>

जे एस:

$('.image-file-button').each(function() {
      $(this).off('click').on('click', function() {
           $(this).siblings('.image-file').trigger('click');
      });
});
$('.image-file').each(function() {
      $(this).change(function () {
           $(this).siblings('.image-file-chosen').val(this.files[0].name);
      });
});

सावधानी: प्रश्न में तीन रूप तत्व एक दूसरे के भाई बहन होना चाहिए (.image-file-selected, .image-file-button, .image-file)


बूटस्ट्रैप 3 और 4 के लिए यहां एक समाधान है।

एक बटन की तरह दिखने वाला एक कार्यात्मक फ़ाइल इनपुट नियंत्रण बनाने के लिए, आपको केवल HTML की आवश्यकता है:

एचटीएमएल

<label class="btn btn-default">
    Browse <input type="file" hidden>
</label>

यह IE9 + सहित सभी आधुनिक ब्राउज़रों में काम करता है। यदि आपको पुरानी आईई के लिए भी समर्थन की आवश्यकता है, तो कृपया नीचे दिखाए गए विरासत दृष्टिकोण का उपयोग करें।

यह तकनीक एचटीएमएल 5 hidden विशेषता पर निर्भर करती है। बूटस्ट्रैप 4 इस सुविधा को असमर्थित ब्राउज़र में शर्मिंदा करने के लिए निम्न सीएसएस का उपयोग करता है। यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं तो आपको जोड़ने की आवश्यकता हो सकती है।

[hidden] {
  display: none !important;
}

पुरानी आईई के लिए विरासत दृष्टिकोण

यदि आपको IE8 और नीचे के लिए समर्थन की आवश्यकता है, तो निम्न HTML / CSS का उपयोग करें:

एचटीएमएल

<span class="btn btn-default btn-file">
    Browse <input type="file">
</span>

सीएसएस

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

ध्यान दें कि जब आप किसी <label> पर क्लिक करते हैं तो पुराने IE फ़ाइल इनपुट को ट्रिगर नहीं करता है, इसलिए सीएसएस "ब्लोट" कुछ चीजों को इसके आसपास काम करने के लिए करता है:

  • फाइल इनपुट आसपास के <span> की पूर्ण चौड़ाई / ऊंचाई को <span>
  • फ़ाइल इनपुट अदृश्य बनाता है

प्रतिक्रिया और अतिरिक्त पढ़ना

मैंने इस विधि के बारे में अधिक जानकारी पोस्ट की है, साथ ही उपयोगकर्ता को दिखाने के लिए उदाहरण हैं कि कितनी फाइलें चुनी गई हैं:

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/


बूटस्ट्रैप v.3.3.4 में निम्न का प्रयास करें

<div>
    <input id="uplFile" type="file" style="display: none;">

    <div class="input-group" style="width: 300px;">
        <div  id="btnBrowse"  class="btn btn-default input-group-addon">Select a file...</div>
        <span id="photoCover" class="form-control">
    </div>
</div>

<script type="text/javascript">
    $('#uplFile').change(function() {
        $('#photoCover').text($(this).val());
    });

    $('#btnBrowse').click(function(){
        $('#uplFile').click();
    });
</script>

मुझे एक ही समस्या है, और मैं इसे इस तरह से कोशिश करता हूं।

<div>
<button type='button' class='btn btn-info btn-file'>Browse</button>
<input type='file' name='image'/>
</div>

सीएसएस

<style>
.btn-file {
    position:absolute;
}
</style>

जेएस

<script>
$(document).ready(function(){
    $('.btn-file').click(function(){
        $('input[name="image"]').click();
    });
});
</script>

नोट: बटन .btn-file इनपुट फ़ाइल के समान टैग में होना चाहिए

आशा है कि आपको सबसे अच्छा समाधान मिलेगा ...


मेरे लिये कार्य करता है:

अद्यतन करें

jQuery प्लगइन शैली :

// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
//     <input class="nice_file_field" type="file" data-label="Choose Document">
//     <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
  $.fn.niceFileField = function() {
    this.each(function(index, file_field) {
      file_field = $(file_field);
      var label = file_field.attr("data-label") || "Choose File";

      file_field.css({"display": "none"});

      nice_file_block_text  = '<div class="input-group nice_file_block">';
      nice_file_block_text += '  <input type="text" class="form-control">';
      nice_file_block_text += '  <span class="input-group-btn">';
      nice_file_block_text += '   <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>';
      nice_file_block_text += '  </span>';
      nice_file_block_text += '</div>';

      file_field.after(nice_file_block_text);

      var nice_file_field_button = file_field.parent().find(".nice_file_field_button");
      var nice_file_block_element = file_field.parent().find(".nice_file_block");

      nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
      file_field.change( function(){
        nice_file_block_element.find("input").val(file_field.val());
      });
    });
  };
})( jQuery );

मैंने @claviska उत्तर संशोधित किया और जैसा कि मुझे पसंद है (बूटस्ट्रैप 3, 4 परीक्षण नहीं किया गया):

<label class="btn btn-default">
    <span>Browse</span>
    <input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>

मैंने केवल छवियों को स्वीकार करने के लिए एक कस्टम अपलोड बटन बनाया है, जिसे आपकी आवश्यकता के अनुसार संशोधित किया जा सकता है।

उम्मीद है की यह मदद करेगा!! :)

(प्रयुक्त बूटस्ट्रैप ढांचे)

Codepen-link

एचटीएमएल

<center>
 <br />
 <br />
 <span class="head">Upload Button Re-Imagined</span>
 <br />
 <br />
 <div class="fileUpload blue-btn btn width100">
   <span>Upload your Organizations logo</span>
   <input type="file" class="uploadlogo" />
 </div>
</center>

सीएसएस

 .head {
   font-size: 25px;
   font-weight: 200;
 }

 .blue-btn:hover,
 .blue-btn:active,
 .blue-btn:focus,
 .blue-btn {
   background: transparent;
   border: solid 1px #27a9e0;
   border-radius: 3px;
   color: #27a9e0;
   font-size: 16px;
   margin-bottom: 20px;
   outline: none !important;
   padding: 10px 20px;
 }

 .fileUpload {
   position: relative;
   overflow: hidden;
   height: 43px;
   margin-top: 0;
 }

 .fileUpload input.uploadlogo {
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
   font-size: 20px;
   cursor: pointer;
   opacity: 0;
   filter: alpha(opacity=0);
   width: 100%;
   height: 42px;
 }


 /*Chrome fix*/

 input::-webkit-file-upload-button {
   cursor: pointer !important;
 }

जे एस

// You can modify the upload files to pdf's, docs etc
//Currently it will upload only images
$(document).ready(function($) {

  // Upload btn
  $(".uploadlogo").change(function() {
    readURL(this);
  });

  function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "gif" || ext == "svg")) {
      var path = $('.uploadlogo').val();
      var filename = path.replace(/^.*\\/, "");
      $('.fileUpload span').html('Uploaded logo : ' + filename);
      // console.log(filename);
    } else {
      $(".uploadlogo").val("");
      $('.fileUpload span').html('Only Images Are Allowed!');
    }
  }
});

यह मुझे पसंद है सबसे अच्छी फ़ाइल अपलोड शैली है:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

आप डेमो और अधिक शैलियों को यहां प्राप्त कर सकते हैं:

http://www.jasny.net/bootstrap/javascript/#fileinput

लेकिन इसका उपयोग करके, आपको जेनी बूटस्ट्रैप फ़ाइलों के साथ ट्विटर बूटस्ट्रैप को प्रतिस्थापित करना चाहिए ..

सादर।


यहां वैकल्पिक चाल है, यह सबसे अच्छा समाधान नहीं है लेकिन यह आपको सिर्फ एक विकल्प देता है

HTML कोड:

<button clss="btn btn-primary" id="btn_upload">Choose File</button>
<input id="fileupload" class="hide" type="file" name="files[]">

जावास्क्रिप्ट:

$("#btn_upload").click(function(e){
e.preventDefault();
$("#fileupload").trigger('click');
});


निम्नलिखित कोड तस्वीर के ऊपर के रूप में बनाता है

एचटीएमएल

<form>
<div class="row">
<div class="col-lg-6">
<label for="file">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Browse</button>
</span>
<input type="text" class="form-control" id="info" readonly="" style="background: #fff;" placeholder="Search for...">
</div><!-- /input-group -->
</label>
</div><!-- /.col-lg-6 -->
</div>

</div>
<input type="file" style="display: none;" onchange="$('#info').val($(this).val().split(/[\\|/]/).pop()); " name="file" id="file">
</form>

जावास्क्रिप्ट

<script type="text/javascript">

$(function() {
    $("label[for=file]").click(function(event) {
        event.preventDefault();
        $("#file").click();
    });
});

</script>






input-type-file