Փոխեք ընտրված ոչ ֆայլը՝

Համոզված եմ, որ դուք չեք կարող փոխել լռելյայն պիտակները կոճակների վրա, դրանք կոշտ կոդավորված են բրաուզերներում (յուրաքանչյուր բրաուզերը ներկայացնում է կոճակները վերնագրերը յուրովի): Դիտեք այս կոճակների ոճավորման հոդվածը

Թաքցրեք մուտքագրումը css-ով, ավելացրեք պիտակ և նշանակեք այն մուտքագրման կոճակին: պիտակը կարող է սեղմել, և սեղմելիս այն կբացի ֆայլի երկխոսությունը:

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Այնուհետև, եթե ցանկանում եք, ոճավորեք պիտակը որպես կոճակ:

Փորձեք սա պարզապես հնարք է

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

Ինչպես է այն աշխատում

Դա շատ պարզ է. Label տարրը օգտագործում է «for» թեգը՝ id-ով ձևի տարրին հղում կատարելու համար: Այս դեպքում մենք օգտագործել ենք «img»-ը որպես նրանց միջև հղումային բանալի: Այն ավարտվելուց հետո, երբ սեղմում եք պիտակի վրա, այն ավտոմատ կերպով գործարկում է ձևի տարրի սեղմման իրադարձությունը, որը մեր դեպքում ֆայլի տարրի սեղմման իրադարձությունն է: Այնուհետև մենք ֆայլի տարրը դարձնում ենք անտեսանելի՝ օգտագործելով display:none և not visibility:hidden, որպեսզի այն դատարկ տարածք չստեղծի:

Վայելեք կոդավորումը

http://jsfiddle.net/ZDgRG/

Տես վերևի հղումը։ Ես օգտագործում եմ css՝ կանխադրված տեքստը թաքցնելու համար և օգտագործում եմ պիտակ՝ ցույց տալու այն, ինչ ուզում եմ.

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

Ճիշտ է, այս «ընտրված ֆայլը» հեռացնելու միջոց չկա, նույնիսկ եթե դուք ունեք նախապես վերբեռնված ֆայլերի ցանկ:

Ամենապարզ լուծումը, որը ես գտել եմ (և աշխատում է IE, FF, CR) հետևյալն է

1. Թաքցրեք ձեր մուտքագրումը և ավելացրեք «ֆայլեր» կոճակը
2. այնուհետև զանգահարեք «ֆայլեր» կոճակը և խնդրեք նրան կապել ֆայլի վերբեռնումը (այս օրինակում ես օգտագործում եմ JQuery):

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});

<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

Պատրաստված է, աշխատում է անթերի :)

Ֆրեդ

Բայց եթե փորձեք հեռացնել այս գործիքի հուշումը

<input type='file' title=""/>

Սա չի աշխատի: Ահա սա աշխատելու իմ փոքրիկ հնարքը, փորձեք վերնագիրը բացատով: Կաշխատի։ :)

<input type='file' title=" "/>

պիտակի օգտագործումը պիտակի տեքստով փոխված

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

ավելացնել jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

Նշում. Btn btn-primary-ը bootstrap կոճակի դաս է: Այնուամենայնիվ, կոճակը դիրքում կարող է տարօրինակ թվալ: Հուսով եմ, որ դուք կարող եք շտկել այն inline css-ով:

Նման բան կարող է աշխատել

input(type='file', name='videoFile', value = "Choose a video please")

Պարզապես փոխեք մուտքի լայնությունը: Մոտ 90px

<input type="file" style="width: 90px" />

<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

և css-ը

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

Դուք կարող եք փորձել այն այս կերպ.

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

Ընտրված ֆայլը ցուցադրելու համար՝

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

Շնորհակալություն @unlucky13-ին ընտրված ֆայլի անունը ստանալու համար

Ահա աշխատանքային ջութակ.

http://jsfiddle.net/eamrmoc7/

input[type=file] {
      color: transparent !important;
  }
input[type=file]::before {
    content: "Attach Your CV: ";
    color: black;
    margin-right: 10px; 
}

<input type="file">

խնդրում ենք օգտագործել, հետո, եթե ցանկանում եք ցուցադրել տեքստը կոճակից հետո

Սա կօգնի ձեզ փոխել անունը «Ոչ մի ֆայլ ընտրել Ընտրել պրոֆիլի նկարը»

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

Ես կօգտագործեի «կոճակը» «պիտակի» փոխարեն, հուսով եմ, որ սա կօգնի ինչ-որ մեկին:

Սա պարզապես կցուցադրի կոճակը, որի վրա օգտատերը սեղմել է, կբացվի ֆայլի ընտրիչը, ֆայլի ընտրությունից հետո ինքնաբերաբար վերբեռնվում է:

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

Ես փորձեցի բոլոր հնարքները, բայց թվում էր, թե ոչինչ չէր ստացվում, և պարզապես հանգեցրեց նրան, որ թաքցրեցի տեքստը CSS գույնի հատկությամբ #fff, քանի որ իմ ֆոնը #fff էր: Ահա կոդը.

<input class="form-control upload_profile_pic" 
   type="file" 
   name="userfile" class="form-control" 
    style="color: #fff;">

or

input.form-control.upload_profile_pic {
    color: #fff;
}

թաքցնելու համար կարող եք օգտագործել հետևյալ css կոդը (ընտրված ֆայլ չկա)

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

ՀԱՄՈԶՎԵՔ, որ ԳՈՒՅՆԸ ՀԱՄԱՍՆՈՒՄ Է ՖՈՏԻՆԻ ԳՈՒՆԻՆ

Կա լավ օրինակ (որը ներառում է ֆայլի տեսակի վավերացում) հետևյալ հասցեով.

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

Հիմնականում սա կոճակ օգտագործելու Ամոսի մտահղացումն է:

Ես փորձեցի վերը նշված առաջարկներից մի քանիսը առանց հաջողության (բայց գուցե դա ես եմ):

Ես նորից նպատակադրում եմ այն ​​կատարել Excel ֆայլի փոխակերպում, օգտագործելով

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>