ฉันจะลบคำแนะนำเครื่องมือ“ ไม่ได้เลือกไฟล์” ออกจากอินพุตไฟล์ใน Chrome ได้อย่างไร

ฉันต้องการลบคำแนะนำเครื่องมือ "ไม่ได้เลือกไฟล์" ออกจากการป้อนไฟล์ใน Google Chrome (ฉันเห็นว่าไม่มีคำแนะนำเครื่องมือแสดงใน Firefox)

โปรดสังเกตว่าฉันไม่ได้พูดถึงข้อความในช่องป้อนข้อมูล แต่เกี่ยวกับคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปที่อินพุต

ฉันได้ลองโดยไม่มีโชค:

$('#myFileInput').attr('title', '');

นี่เป็นส่วนพื้นฐานของเบราว์เซอร์webkitและคุณไม่สามารถลบออกได้ คุณควรคิดถึงวิธีแก้ปัญหาที่แฮ็กเช่นการปกปิดหรือซ่อนอินพุตไฟล์

hackyวิธีการแก้ปัญหา:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <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, ''))
})    

ซอ

คำแนะนำเครื่องมือเริ่มต้นสามารถแก้ไขได้โดยใช้แอตทริบิวต์ title

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

แต่ถ้าคุณพยายามลบคำแนะนำเครื่องมือนี้

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

วิธีนี้ใช้ไม่ได้ นี่คือเคล็ดลับเล็ก ๆ น้อย ๆ ของฉันในการทำงานนี้ลองชื่อด้วยช่องว่าง มันจะทำงาน.:)

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

สำหรับฉันฉันแค่อยากให้มองไม่เห็นข้อความและยังคงใช้ปุ่มเบราว์เซอร์ดั้งเดิม

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

ฉันชอบคำแนะนำทั้งหมดของ undefined แต่ฉันมีกรณีการใช้งานที่แตกต่างออกไปหวังว่านี่จะช่วยคนที่อยู่ในสถานการณ์เดียวกันได้

ฉันพบวิธีแก้ปัญหาที่ง่ายมากเพียงตั้งค่าสตริงว่างลงในแอตทริบิวต์ title

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

คุณสามารถปิดใช้งานคำแนะนำเครื่องมือที่ตั้งชื่อเรื่องโดยเว้นวรรคบนเบราว์เซอร์ webkit เช่น Chrome และสตริงว่างบน Firefox หรือ IE (ทดสอบบน Chrome 35, FF 29, IE 11, safari mobile)

$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');

ง่ายมากอย่าลืม CSS ที่กำหนดเป้าหมายสิ่งที่อินพุต ["type"] มันไม่ได้ผลสำหรับฉัน ฉันไม่รู้ว่าทำไม ฉันได้รับโซลูชันของฉันในแท็ก HTML ของฉัน

<input type="file" style="color:transparent; width:70px;"/>

จบปัญหา

คำตอบทั้งหมดที่นี่มีความซับซ้อนทั้งหมดหรือไม่อย่างนั้นก็ผิดทั้งหมด

html:

<div>
    <input type="file" />
    <button>Select File</button>
</div>

css:

input {
    display: none;
}

จาวาสคริปต์:

$('button').on('click', function(){
   $('input').trigger('click'); 
});

http://jsfiddle.net/odfe34n8/

ฉันสร้างซอนี้ด้วยวิธีที่ง่ายที่สุด การคลิกปุ่มเลือกไฟล์จะเป็นการเปิดเมนูเลือกไฟล์ จากนั้นคุณสามารถปรับแต่งปุ่มได้ตามที่คุณต้องการ โดยพื้นฐานแล้วสิ่งที่คุณต้องทำคือซ่อนอินพุตไฟล์และทริกเกอร์การคลิกสังเคราะห์เมื่อคุณคลิกปุ่มอื่น ฉันเห็นการทดสอบนี้บน IE 9, FF และ Chrome และทุกอย่างทำงานได้ดี

สิ่งนี้ใช้ได้กับฉัน (อย่างน้อยใน Chrome และ Firefox):

<input type="file" accept="image/*" title="&nbsp;"/>

นี่เป็นเรื่องยุ่งยาก ฉันไม่พบวิธีเลือกองค์ประกอบ 'ไม่ได้เลือกไฟล์' ดังนั้นฉันจึงสร้างมาสก์โดยใช้: after pseudo selector

โซลูชันของฉันยังต้องการการใช้ตัวเลือกหลอกต่อไปนี้เพื่อจัดรูปแบบปุ่ม:

::-webkit-file-upload-button

ลองดู: http://jsfiddle.net/J8Wfx/1/

FYI: สิ่งนี้ใช้ได้เฉพาะในเบราว์เซอร์ webkit เท่านั้น

ปล. ถ้าใครรู้วิธีดูตัวเลือกหลอกของ webkit เหมือนข้างบนใน webkit inspector โปรดแจ้งให้เราทราบ

ในทุกเบราว์เซอร์และเรียบง่าย สิ่งนี้ทำเพื่อฉัน

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

คุณจะต้องปรับแต่งการควบคุมค่อนข้างมากเพื่อให้บรรลุเป้าหมายนี้

โปรดปฏิบัติตามคำแนะนำที่: http://www.quirksmode.org/dom/inputfile.html

ห่อด้วยและทำให้มองไม่เห็น ทำงานใน Chrome, Safari && FF

label { 
  padding: 5px;
  background: silver;
}
label > input[type=file] {
    display: none;
}

<label>
  <input type="file">
  select file
</label>

หลีกเลี่ยงการใช้จาวาสคริปต์ที่ไม่จำเป็นจะดีกว่า คุณสามารถใช้ประโยชน์จากแท็ก label เพื่อขยายเป้าหมายการคลิกของอินพุตได้ดังนี้:

<label>
  <input type="file" style="display: none;">
  <a>Open</a>
</label>

แม้ว่าอินพุตจะถูกซ่อนไว้ แต่ลิงก์ก็ยังทำงานเป็นเป้าหมายการคลิกสำหรับมันและคุณสามารถจัดรูปแบบได้ตามที่คุณต้องการ

แม้ว่าคุณจะตั้งค่าความทึบเป็นศูนย์คำแนะนำเครื่องมือก็จะปรากฏขึ้น ลองใช้visibility:hiddenองค์ประกอบ มันทำงานให้ฉัน

ได้ผลสำหรับฉัน!

input[type="file"]{
  font-size: 0px;
}

จากนั้นคุณสามารถใช้ชนิดที่แตกต่างของรูปแบบเช่นwidth, heightหรือคุณสมบัติอื่น ๆ เพื่อสร้างแฟ้มใส่ของคุณเอง

ให้ -webkit-appearance:ไป คุ้มค่าที่จะลองต่อไป

http://css-infos.net/property/-webkit-appearance

หวังว่าจะช่วยได้ :)

โดยตรงคุณไม่สามารถแก้ไขเกี่ยวกับinput [type = file] ได้มากนัก

สร้างความทึบของไฟล์ประเภทอินพุต: 0 และลองวางองค์ประกอบสัมพัทธ์ [div / span / button] ทับด้วย CSS ที่กำหนดเอง

ลองดู http://jsfiddle.net/gajjuthechamp/pvyVZ/8/

แปลกใจที่ไม่มีใครพูดถึง event.preventDefault()

$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });

คุณสามารถกำหนดความกว้างสำหรับองค์ประกอบ yor ซึ่งจะแสดงเฉพาะปุ่มและจะซ่อน "ไม่ได้เลือกไฟล์"

ฉันมองหาคำตอบที่ดีสำหรับสิ่งนี้ ... และฉันพบสิ่งนี้:

ก่อนอื่นให้ลบ 'ไม่ได้เลือกไฟล์'

input[type="file"]{
font-size: 0px;
}

จากนั้นใช้งานปุ่มด้วย-webkit-file-upload-buttonวิธีนี้:

input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}

หวังว่านี่คือสิ่งที่คุณกำลังมองหามันเหมาะกับฉัน

การรวมคำแนะนำด้านบนโดยใช้ jQuery นี่คือสิ่งที่ฉันทำ:

input[type='file'].unused {
  color: transparent;
}

และ:

$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};

และใส่คลาสที่ "ไม่ได้ใช้" ลงในอินพุตไฟล์ของคุณ นี่เป็นเรื่องง่ายและใช้งานได้ดี

ทางออกที่ดีที่สุดสำหรับฉันคือห่อ input [type = "file"] ไว้ใน Wrapper และเพิ่มรหัส jquery:

$(function(){
	function readURL(input){
        if (input.files && input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});

#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}

<form action="#" method="post" id="form" >
	<div class="button">
		Upload<input type="file" id="image" />
     </div>
     <img id="uploadImage" src="#" alt="your image" width="350" height="300" />
 </form>

ฉันคิดวิธีแก้ปัญหาแฮ็คที่ลบ "ไม่ได้เลือกไฟล์" โดยสิ้นเชิงรวมทั้งพื้นที่พิเศษที่เพิ่มหลังจากข้อความนั้น (ใน Chrome ฉันได้รับสิ่งที่ต้องการ: "ไม่ได้เลือกไฟล์")

สิ่งนี้ทำให้การจัดตำแหน่งหน้าของฉันยุ่งเหยิงโดยสิ้นเชิงดังนั้นฉันจึงต่อสู้กับมันเพื่อหาทางแก้ไข ภายในแอตทริบิวต์สไตล์ของแท็กอินพุตการตั้งค่า "width" ให้กับความกว้างของปุ่มจะกำจัดข้อความและช่องว่างต่อท้าย เนื่องจากความกว้างของปุ่มไม่เท่ากันในทุกเบราว์เซอร์ (เช่นใน Firefox มีขนาดเล็กกว่าเล็กน้อย) คุณจึงต้องกำหนดสีของสไตล์ให้เป็นสีเดียวกับพื้นหลังของหน้าด้วย (มิฉะนั้นจะหลงทาง " ไม่ "อาจแสดงผ่าน) แท็กไฟล์อินพุตของฉันมีลักษณะดังนี้:

<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">    

ฉันรู้ว่ามันเป็นการแฮ็กเล็กน้อย แต่สิ่งที่ฉันต้องการก็คือตั้งค่าสีให้โปร่งใสในสไตล์ชีต - แบบอินไลน์จะมีลักษณะดังนี้