"কোনও ফাইল বাছাই করা হয়নি" পরিবর্তন করুন:

Question 1

আমার নীচে নীচে একটি বাটন "ফাইল চয়ন করুন" আছে (আমি জ্যাড ব্যবহার করছি তবে এটি এইচটিএমএল 5 এর মতো হওয়া উচিত):

 input(type='file', name='videoFile')

ব্রাউজারে এটি "কোনও ফাইল চয়ন করা হয়নি" এর পাশের একটি পাঠ্য সহ একটি বোতাম দেখায়। আমি "কোনও ফাইল বাছাই করা হয়নি" পাঠ্যটিকে অন্য কোনও কিছুতে পরিবর্তন করতে চাই, যেমন "কোনও ভিডিও চয়ন করা হয়নি" বা "একটি ভিডিও চয়ন করুন দয়া করে"। আমি এখানে প্রথম পরামর্শ অনুসরণ:

আমি কোনও ফাইল ইনপুট ফিল্ডের জন্য 'কোনও ফাইল বেছে নেই' দেখতে চাই না

তবে এটি করার ফলে পাঠ্যটি পরিবর্তন হয়নি:

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

সমস্যাটি কোথায় আছে তা বোঝার জন্য কেউ আমাকে সহায়তা করতে পারে?

Question 2

আমি নিশ্চিত যে আপনি বোতামগুলিতে ডিফল্ট লেবেলগুলি পরিবর্তন করতে পারবেন না, সেগুলি ব্রাউজারগুলিতে হার্ড-কোডড (প্রতিটি ব্রাউজার বোতামগুলির নিজস্ব উপায়ে উপস্থাপন করে)। এই বোতাম স্টাইলিং নিবন্ধটি দেখুন

Question 3

সিএসএস দিয়ে ইনপুটটি লুকান, একটি লেবেল যুক্ত করুন এবং এটি ইনপুট বোতামে বরাদ্দ করুন। লেবেলটি ক্লিকযোগ্য হবে এবং ক্লিক করার পরে এটি ফাইলের ডায়ালগটিকে আগুন ধরিয়ে দেবে।

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

তারপরে আপনি চাইলে লেবেলটিকে বোতাম হিসাবে স্টাইল করুন।

Question 4

এটি কেবল একটি কৌশল চেষ্টা করুন

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

কিভাবে এটা কাজ করে

এটা খুবই সাধারণ. লেবেলের উপাদানটি আইডি দ্বারা কোনও ফর্মের উপাদানটির জন্য "ট্যাগ" ট্যাগ ব্যবহার করে। এই ক্ষেত্রে, আমরা তাদের মধ্যে রেফারেন্স কী হিসাবে "img" ব্যবহার করেছি। এটি হয়ে গেলে, আপনি যখনই লেবেলে ক্লিক করেন, এটি স্বয়ংক্রিয়ভাবে ফর্মের উপাদান ক্লিক ইভেন্টটিকে ট্রিগার করে যা আমাদের ক্ষেত্রে ফাইল উপাদান ক্লিক ইভেন্ট। এরপরে আমরা ডিসপ্লেটি ব্যবহার করে ফাইল উপাদানটিকে অদৃশ্য করে তুলি: কিছুই নয় এবং দৃশ্যমানতা নয়: লুকানো যাতে এটি খালি স্থান তৈরি না করে।

কোডিং উপভোগ করুন

Question 5

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];
    }
};

Question 6

ঠিক আছে, আপনার প্রাক-আপলোড ফাইলগুলির একটি তালিকা থাকলেও, এই 'কোনও ফাইল চয়ন নয়' সরানোর কোনও উপায় নেই।

সবচেয়ে সহজ সমাধান আমি খুঁজে পেয়েছি (এবং আইআই, এফএফ, সিআর এ কাজ করে) নিম্নলিখিতটি

আপনার ইনপুটটি লুকান এবং একটি 'ফাইল' বোতাম যুক্ত করুন
তারপরে 'ফাইলগুলি' বোতামটি কল করুন এবং তাকে ফাইলআপলোড বাঁধতে বলুন (আমি এই উদাহরণে জ্যাকুয়ারি ব্যবহার করছি)

$('.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;'>

স্নিপেট প্রসারিত করুন

এটি সম্পন্ন হয়েছে, পুরোপুরি কাজ করে :)

ফ্রেড

Question 7

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

স্নিপেট প্রসারিত করুন

Question 8

তবে আপনি যদি এই টুলটিপটি সরিয়ে দেওয়ার চেষ্টা করেন

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

এই অভ্যাস কাজ করে না। এটি কাজ করার জন্য আমার ছোট কৌশল এখানে একটি স্থান দিয়ে শিরোনাম চেষ্টা করুন। এটি কাজ করবে। :)

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

Question 9

এরকম কিছু কাজ করতে পারে

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

Question 10

এইচটিএমএল

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

সিএসএস

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

দ্রষ্টব্য: বিটিএন বিটিএন-প্রাথমিক বুটস্ট্র্যাপ বোতামের একটি শ্রেণি। তবে বোতামটি অবস্থানটিতে ক্লান্ত দেখতে পারে look আশা করি আপনি ইনলাইন সিএসএস দ্বারা এটি ঠিক করতে পারবেন।

Question 11

 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});

.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>

স্নিপেট প্রসারিত করুন

Question 12

লেবেল পাঠ্য সহ লেবেল ব্যবহার পরিবর্তন

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

Question 13

কেবল ইনপুটটির প্রস্থ পরিবর্তন করুন। প্রায় 90px

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

Question 14

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

এবং সিএসএস

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

Question 15

আপনি এটি এইভাবে চেষ্টা করতে পারেন:

<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();
})

নির্বাচিত ফাইলের নাম পাওয়ার জন্য @ অদম্য 13 কে ধন্যবাদ

এখানে ফিডল কাজ করছে:

http://jsfiddle.net/eamrmoc7/

Question 16

এটি আপনাকে "প্রোফাইল ছবি নির্বাচন করার জন্য কোনও ফাইল পছন্দ করে না" এর নাম পরিবর্তন করতে সহায়তা করবে

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

Question 17

আমি "লেবেল" এর পরিবর্তে "বোতাম" ব্যবহার করব, আশা করি এটি কারও সাহায্য করবে।

এটি কেবল একটি বোতাম প্রদর্শন করবে, ব্যবহারকারী ক্লিক করবে পপআপ ফাইল চয়নকারী, ফাইল চয়ন করার পরে, স্বয়ংক্রিয়ভাবে আপলোড হবে।

<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;" />

Question 18

আপনি লুকানোর জন্য নিম্নলিখিত সিএসএস কোড ব্যবহার করতে পারেন (কোনও ফাইল চয়ন করা হয়নি)

এইচটিএমএল

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

সিএসএস

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

কালারটি ব্যাকগ্রাউন্ড কালারের সাথে ম্যাচ করছে তা নিশ্চিত করুন

Question 19

এখানে একটি ভাল উদাহরণ রয়েছে (যার মধ্যে ফাইলের ধরণের বৈধতা রয়েছে):

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

এটি মূলত একটি বোতাম ব্যবহারের আমোসের ধারণা a

আমি কোনও সাফল্য ছাড়াই উপরের বেশ কয়েকটি পরামর্শ চেষ্টা করেছিলাম (তবে সম্ভবত এটি আমার)।

আমি এটি ব্যবহার করে একটি এক্সেল ফাইল রূপান্তর করতে পুনরায় পরিকল্পনা করছি

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