कैसे <input type = "फ़ाइल"> अनुकूलित करने के लिए?

Question

क्या इसका स्वरूप बदलना संभव है <input type="file">?

Comments

पाठ क्षेत्र होने का कारण यह है कि यह उपयोगकर्ता को फ़ाइल पथ दिखाता है क्योंकि वे ब्राउज़ करते हैं और अपनी फ़ाइल का चयन करते हैं।

— k से z

Oooppss .. ऐसा लगता है कि जिस तरह से फ़ायरफ़ॉक्स इसे संभालता है ...

— Newbie Coder

बस इसलिए हम स्पष्ट हैं, भले ही वे फ़ाइल के लिए ब्राउज़ करें, फिर भी उन्हें फ़ॉर्म सबमिट बटन के साथ फ़ॉर्म सबमिट करना होगा।

— k से z

कृपया इसे करने के लिए बहुत सरल तरीके से इस समाधान को देखें ।

— Joeytje50

भविष्य के प्रश्न को पुराने के डुप्लिकेट के रूप में चिह्नित करना थोड़ा अजीब है। क्या यह मिसाल कायम करेगा कि सवालों को फिर से पूछना और फिर मूल लोगों को बंद करना ठीक है? यहां डुप्लिकेट पहले से ही एक बड़ी समस्या है। मैं एक प्रश्न को फिर से पूछने के लायक देखता हूं, जहां मौजूदा उत्तर बासी हो गए हैं , लेकिन प्रश्न को संपादित करना और अन्य उत्तरों को जोड़ना / संपादित करना हमेशा संभव होता है।

— एलेक्स

Answer 1

आप के बारे में ज्यादा बदलाव नहीं कर सकते input[type=file]नियंत्रण ही।

चूंकि labelइनपुट के साथ जोड़े गए किसी तत्व को सही ढंग से क्लिक करने से यह सक्रिय / फोकस हो जाएगा, हम labelOS ब्राउज़ डायलॉग को ट्रिगर करने के लिए a का उपयोग कर सकते हैं ।

यहाँ है कि आप इसे कैसे कर सकते हैं ...

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

प्रपत्र नियंत्रण के लिए CSS यह अदृश्य दिखाई देगा और दस्तावेज़ लेआउट में जगह नहीं लेगा, लेकिन फिर भी मौजूद रहेगा इसलिए इसे इस पर सक्रिय किया जा सकता है label।

यदि आप चयन के बाद उपयोगकर्ता के चुने हुए पथ को प्रदर्शित करना चाहते हैं, तो आप changeजावास्क्रिप्ट के साथ घटना के लिए सुन सकते हैं और फिर उस पथ को पढ़ सकते हैं जो ब्राउज़र आपको उपलब्ध कराता है (सुरक्षा कारणों से यह सटीक पथ के बारे में आपसे झूठ बोल सकता है)। अंतिम उपयोगकर्ता के लिए इसे सुंदर बनाने का एक तरीका यह है कि केवल उस पथ के आधार नाम का उपयोग किया जाए जो वापस लौटा है (इसलिए उपयोगकर्ता केवल चुने हुए फ़ाइलनाम को देखता है)।

इसे स्टाइल करने के लिए Tympanus द्वारा एक बढ़िया गाइड है ।

Comments

मेरा मानना ​​है कि ये बेहतर शैली हैं, हम कंटेनर पर कहीं भी क्लिक करके खोले जाने वाले चुनिंदा फ़ाइल डायलॉग के लिए लक्ष्य रखते हैं:#container { position: relative; width: ...px; height: ...px; overflow: hidden; } #input { position: absolute; right: 0; font-size: <many a>px; opacity: 0; margin: 0; padding: 0; border: none; }

— x-yuri

का उपयोग करना <label>(जैसा कि Tympanus द्वारा दिखाया गया है) कहीं अधिक अर्थपूर्ण और कम हैकी है। साथ ही, इस सवाल को कुछ साल बाद फिर से पूछा गया था और उसके बेहतर जवाब हैं: फाइल अपलोड बटन के लिए क्रॉस-ब्राउज़र कस्टम स्टाइलिंग ।

— दान डैस्केल्स्कु

@DanDascalescu मैं सहमत हूं, अगर मैं सही तरीके से याद कर सकता हूं (2011 में वापस) यह IE के साथ समस्या थी, शायद 6 या 7. मैं इसे भविष्य में अब लाने के लिए इस उत्तर को संपादित करूंगा।

— एलेक्स

लेबल का उपयोग करना बेहतर क्यों होगा? आप लेबल को टैब नहीं कर सकते, इसके अलावा, एक बटन एक संवाद को सक्रिय करने के लिए लेबल की तुलना में मेरे लिए अधिक समझ में आता है।

— लुई-मैरी मैथ्यू

@alex, यह फ़ाइल नाम प्रदर्शित नहीं कर रहा है।

— नरेन वर्मा

Answer 2

शायद ऐसा ही कुछ?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>

Comments

इस मामले में 9 यानी फॉर्म को iframe भेजने की अनुमति नहीं होगी।

— x-यूरी

@ x- यूरी आपका क्या मतलब है?

— माइकेल फेलिक्स

जहाँ तक मुझे याद है, यानी 9 (और शायद अन्य) आइफ्रेम को फ़ॉर्म भेजने की अनुमति नहीं देंगे, क्योंकि उपयोगकर्ता ने इनपुट-फ़ाइल पर क्लिक नहीं किया था।

— x-यूरी

display: noneटैब क्रम से इनपुट हटा देगा, जिससे पृष्ठ कम सुलभ हो जाएगा। का उपयोग करना <label>(जैसा कि Tympanus द्वारा दिखाया गया है) कहीं अधिक अर्थपूर्ण और कम हैकी है। साथ ही, इस सवाल को कुछ साल बाद फिर से पूछा गया था और उसके बेहतर जवाब हैं: फाइल अपलोड बटन के लिए क्रॉस-ब्राउज़र कस्टम स्टाइलिंग ।

— डैन डस्केल्सस्कु जूल

एक चयनकर्ता में कोड को वास्तव में काम करने के लिए निश्चित समापन वर्ग ब्रैकेट टाइपो

— कॉन्स्टेंटिन ग्रो

Answer 3

  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

क्यों नहीं? ^ _ ^

उदाहरण यहाँ देखें

Comments

@InakiIbarrolaAtxa क्या आप इसका समर्थन करने के लिए डेटा प्रदान कर सकते हैं?

— बेन लेगिएरो

Chrome 51 में कुछ भी स्टाइल नहीं करता है। (जैसा कि Tympanus द्वारा दिखाया गया है) का उपयोग करना<label> शब्दार्थ रूप से सही समाधान है। साथ ही, इस सवाल को कुछ साल बाद फिर से पूछा गया था और उसके बेहतर जवाब हैं: फाइल अपलोड बटन के लिए क्रॉस-ब्राउज़र कस्टम स्टाइलिंग ।

— डैन डस्केल्सस्कु

Answer 4

यदि आप यहां बूटस्ट्रैप का उपयोग कर रहे हैं तो बेहतर समाधान है:

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

IE8 और नीचे के लिए http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

स्रोत: https://stackoverflow.com/a/18164555/625952

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। - समीक्षा से

— टॉम

हो गया, मैंने सिर्फ एक उदाहरण शामिल किया है

— Ouadie

Answer 5

सबसे आसान उपाय..

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

Comments

कैसे आए इस पर किसी का ध्यान नहीं गया।

— rootExplorr

मुझे खेल के लिए देर हो गई

— Caden311

Answer 6

वेबकिट में आप इसे आज़मा सकते हैं ...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Comments

क्या आप फ़ायरफ़ॉक्स के लिए कोई समान समाधान जानते हैं? क्या यह मौजूद है? )

— आर्टेम जेड।

Answer 7

सबसे पहले यह एक कंटेनर है:

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

दूसरा, यह एक सीएसएस शैली है, यदि आप अधिक अनुकूलन को वास्तविक बनाना चाहते हैं, तो बस अपनी आँखें खुली रखें :)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

यह उदाहरण बटन के अंदर पाठ के लिए शैली नहीं है, यह फ़ॉन्ट-आकार पर निर्भर करता है, कंटेनर के लिए ऊंचाई और पैडिंग-टॉप मान को सही करें

Comments

मुझे आश्चर्य है कि आप right: 0इसके बजाय इसे क्यों नहीं बनाते हैं left: 0? इस तरह आपके पास कंटेनर से बाहर का टेक्स्ट बॉक्स होगा। टेक्स्ट बॉक्स पर क्लिक करने से चुनिंदा फ़ाइल डायलॉग नहीं खुलते। इसके अलावा, मेरा मानना ​​है कि इनपुट फ़ाइल को बड़ा बनाना font-sizeबेहतर विचार है, फिर उपयोग करना widthऔर height।

— x-यूरी

Answer 8

चाल इनपुट छिपा रही है और लेबल को अनुकूलित करती है।

HTML:

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

सीएसएस:

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

जे एस:

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

आप इस उदाहरण को देख सकते हैं: https://jsfiddle.net/rjurado/hnf0zhy1/4/

Comments

मुझे पसंद है कि कैसे आपका कोई फ़ॉन्ट विस्मयकारी आइकन का उपयोग करता है, किसी भी अन्य के विपरीत।

— मैक्स वोइसर्ड

Answer 9

यह बेहतर है अगर आप सिर्फ एक का उपयोग करें <label>, छुपाएँ <input>, और लेबल को अनुकूलित करें।

HTML:

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

सीएसएस:

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}

Comments

display: noneटैब ऑर्डर से तत्व को हटा देगा। का उपयोग करना <label>(जैसा कि Tympanus द्वारा दिखाया गया है) शब्दार्थ रूप से सही तरीका है, लेकिन कुछ शोधन की आवश्यकता है। साथ ही, इस सवाल को कुछ साल बाद फिर से पूछा गया था और उसके बेहतर जवाब हैं: फाइल अपलोड बटन के लिए क्रॉस-ब्राउज़र कस्टम स्टाइलिंग ।

— डैन डस्केलस्क्यू

Answer 10

चयनित फ़ाइल का पथ दिखाने के लिए आप इसे html पर आज़मा सकते हैं:

<div class="fileinputs">
    <input type="file" class="file">
</div>

और जावास्क्रिप्ट में:

        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        var image = document.createElement('div');
        image.className='fakebtn';
        image.innerHTML = 'browse';
        fakeFileUpload.appendChild(image);
        fakeFileUpload.appendChild(document.createElement('input'));
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
            if (x[i].type != 'file') continue;
            if (x[i].parentNode.className != 'fileinputs') continue;
            x[i].className = 'file hidden';
            var clone = fakeFileUpload.cloneNode(true);
            x[i].parentNode.appendChild(clone);
            x[i].relatedElement = clone.getElementsByTagName('input')[0];
            x[i].onchange = x[i].onmouseout = function () {
                this.relatedElement.value = this.value;
            }
        }

और शैली:

div.fileinputs {
    position: relative;
    height: 30px;
    width: 370px;
}
input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    width: 370px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
    border: none;
    box-shadow: 0px 0px 2px 1px #ccc;
    padding: 4px;
    width: 241px;
    height: 20px;
}
div.fakefile .fakebtn{
    width: 150px;
    background: #eb5a41;
    z-index: 10;
    font-family: roya-bold;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline;
    margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
    background: #DA472E;
}

div.fileinputs input[type="file"] {
    opacity: 0;
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 20;
    width: 102px;
    height: 40px;
    cursor: pointer;
}

Comments

सलाम साघर, यह मेरे लिए सबसे अच्छा जवाब था, धन्यवाद

— ucMedia

Answer 11

बूटस्ट्रैप उदाहरण

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>

Answer 12

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

यहाँ कोडपेन है: http://codepen.io/emiemi/pen/zxNXWR

जे एस:

//click on our custom btn triggers a click on the hidden actual file input 
$("#btnup").click(function(){
   $("#fileup").click();    
});


//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
    var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file  
    var res=$('#fileup').val();
    var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
    if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
        $( ".imgupload" ).hide("slow"); 
        $( ".imguploadok" ).hide("slow");   
        $( ".imguploadstop" ).show("slow");
        $('#nomefile').css({"color":"red","font-weight":700});
        $('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }else{
 //if file is valid we show the green alert
    $( ".imgupload" ).hide("slow");
    $( ".imguploadstop" ).hide("slow");
    $( ".imguploadok" ).show("slow");
    $('#nomefile').html(arr.slice(-1)[0]);
    $('#nomefile').css({"color":"green","font-weight":700});
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
  //if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }
    }
});


$('#nome').change(function(){
//same as file change but on name field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});
$('#tit').change(function(){
 //same as file change but on tit field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

HTML:

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

Answer 13

यहाँ एक तरीका है जो मुझे पसंद है क्योंकि यह इनपुट को पूरे कंटेनर को भरता है। चाल "फ़ॉन्ट-आकार: 100px" है, और इसे "अतिप्रवाह: छिपा हुआ" और सापेक्ष स्थिति के साथ जाने की आवश्यकता है।

<div id="upload-file-container" >
   <input type="file" />
</div>

#upload-file-container {
   width: 200px;
   height: 50px;
   position: relative;
   border: dashed 1px black;
   overflow: hidden;
}

#upload-file-container input[type="file"]
{
   margin: 0;
   opacity: 0;   
   font-size: 100px;
}

Comments

इसे बनाने के लिए समझ में आता हैposition: absolute; right: 0; font-size: <many>px;

— x-yuri

Answer 14

आप उन्हें स्टाइल कर सकते हैं, लेकिन आप उन तत्वों को नहीं हटा सकते जो पहले से हैं। यदि आप रचनात्मक हैं, तो आप इसके साथ काम कर सकते हैं और कुछ ऐसा कर सकते हैं:

input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    background: linear-gradient(to top, #FFF, #DDD);
    border: thin solid rgba(0,0,0, .5);
    border-radius: .25em;
    box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
    cursor: text;
    padding: .25em;
}

http://jsfiddle.net/zr1x1m2b/1/

मेरा सुझाव है कि आप इस कोड के साथ खेलते हैं, लाइनों को हटाते हैं, अपना खुद का जोड़ते हैं, जो कुछ भी करते हैं जब तक आपको कुछ ऐसा नहीं मिलता है जो आपको पसंद है!

Comments

"एक फ़ाइल चुनें" शब्दों की शैली नहीं है। का उपयोग करना <label>(जैसा कि Tympanus द्वारा दिखाया गया है) शब्दार्थ है और पूर्ण अनुकूलन क्षमता प्रदान करता है। साथ ही, इस सवाल को कुछ साल बाद फिर से पूछा गया था और उसके बेहतर जवाब हैं: फाइल अपलोड बटन के लिए क्रॉस-ब्राउज़र कस्टम स्टाइलिंग ।

— डैन डेस्केल्सकू जू

@DanDascalescu तुम सही हो! मैं सिर्फ एक शुद्ध-सीएसएस समाधान की पेशकश कर रहा हूं, यदि आप HTML को अपने सेटअप के साथ नहीं बदल सकते हैं।

— बेन लेगियरियो

Answer 15

अपने पसंदीदा CSS का उपयोग करते हुए, बस एक सामान्य बटन को स्टाइल करें।

फिर अपने स्टाइल बटन पर एक छिपे हुए इनपुट तत्व को बनाने और लिंक करने के लिए एक साधारण जेएस फ़ंक्शन को कॉल करें। छिपने वाले भाग को करने के लिए ब्राउज़र-विशिष्ट सीएसएस न जोड़ें।

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

ध्यान दें कि उपयोगकर्ता द्वारा किसी फ़ाइल को चुनने के बाद हर बार उपरोक्त कोड इसे कैसे लिंक करता है। यह महत्वपूर्ण है क्योंकि "onchange" केवल तभी कहा जाता है जब उपयोगकर्ता फ़ाइल नाम बदलता है। लेकिन आप शायद हर बार उपयोगकर्ता द्वारा प्रदान की गई फ़ाइल को प्राप्त करना चाहते हैं।

अधिक जानकारी के लिए, ड्रॉपज़ोन और जीमेल अपलोड पर शोध करें।

Answer 16

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

यह jquery और javascript (विजुअल स्टूडियो) का उपयोग करके मेरी पूरी तरह कार्यात्मक ग्राहकीकृत फ़ाइल अपलोड / अटैचमेंट है। यह उपयोगी होगा!

कोड टिप्पणी अनुभाग में उपलब्ध होगा!

लिंक: https://youtu.be/It38OzMAeig

का आनंद लें :)

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>

 <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

Answer 17

यहाँ एक त्वरित शुद्ध सीएसएस वर्कअराउंड है (क्रोम पर काम करता है और इसमें फ़ायर्फ़ॉक्स कमबैक शामिल है), फ़ाइल नाम, एक लेबल और एक कस्टम अपलोड बटन सहित, यह वही करता है - जिसे जावास्क्रिप्ट की कोई आवश्यकता नहीं है! 🎉

नोट: and यह क्रोम पर काम करता है और इसमें फ़ायर्फ़ॉक्स फ़ॉलबैक है - वैसे भी, मैं इसका उपयोग वास्तविक दुनिया की वेबसाइट पर नहीं करूँगा - यदि ब्राउज़र संगतता आपके लिए एक चीज़ है (यह क्या होना चाहिए)। तो यह अधिक प्रायोगिक है।

.fileUploadInput {
  display: grid;
  grid-gap: 10px;
  position: relative;
  z-index: 1; }
  
  .fileUploadInput label {
    display: flex;
    align-items: center;
    color: setColor(primary, 0.5);
    background: setColor(white);
    transition: .4s ease;
    font-family: arial, sans-serif;
    font-size: .75em;
    font-weight: regular; }
    
  .fileUploadInput input {
    position: relative;
    z-index: 1;
    padding: 0 gap(m);
    width: 100%;
    height: 50px;
    border: 1px solid #323262;
    border-radius: 3px;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: regular; }
    .fileUploadInput input[type="file"] {
      padding: 0 gap(m); }
      .fileUploadInput input[type="file"]::-webkit-file-upload-button {
        visibility: hidden;
        margin-left: 10px;
        padding: 0;
        height: 50px;
        width: 0; }
        
  .fileUploadInput button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    line-height: 0;
    user-select: none;
    color: white;
    background-color: #323262;
    border-radius: 0 3px 3px 0;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: 800; }
    .fileUploadInput button svg {
      width: auto;
      height: 50%; }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border: 0px;
  outline: 0;
  background-repeat: no-repeat;
  appearance: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  text-decoration: none;
  list-style: none;
  user-select: text;
  line-height: 1.333em; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(66, 50, 98, 0.05); }

.container {
  padding: 25px;
  box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
  border: 1px solid #eaeaea;
  border-radius: 3px;
  background: white; }

@-moz-document url-prefix() {
.fileUploadInput button{
    display: none
}
}

<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->

<div class="container">
    <div class="fileUploadInput">
    <label>✨ Upload File</label>
    <input type="file" />
    <button>+</button></div>
</div>

Answer 18

यहाँ एक तरीका है जिसे मैंने हाल ही में खोजा है, बिट के साथ jQuery का

HTML कोड:

<form action="">
    <input type="file" name="file_upload" style="display:none" id="myFile">

    <a onclick="fileUpload()"> Upload a file </a>
</form>

जावास्क्रिप्ट / jQuery के भाग के लिए:

<script>
function fileUpload() {
    $("#myFile").click();
}
</script>

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

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

पुनश्च: सीडीएन या किसी अन्य स्रोत से jQuery को शामिल करना न भूलें

Comments

display: noneटैब ऑर्डर से इनपुट हटा देगा। का उपयोग करना <label>(जैसा कि Tympanus द्वारा दिखाया गया है) कहीं अधिक अर्थपूर्ण और कम हैकी है। साथ ही, इस सवाल को कुछ साल बाद फिर से पूछा गया था और उसके बेहतर जवाब हैं: फाइल अपलोड बटन के लिए क्रॉस-ब्राउज़र कस्टम स्टाइलिंग ।

— डैन डस्केलस्क्यू