เช่นเดียวกับผู้คนจำนวนมากที่ฉันต้องการที่จะปรับแต่งที่น่าเกลียดinput type=fileและฉันรู้ว่ามันไม่สามารถทำได้โดยไม่ต้อง hacks javascriptบางส่วนและ แต่ปัญหาก็คือในกรณีของฉันปุ่มไฟล์อัปโหลดมีไว้สำหรับอัปโหลดภาพเท่านั้น ( jpeg | jpg | png | gif ) ดังนั้นฉันจึงสงสัยว่าฉันสามารถใช้clickableภาพ "" ซึ่งจะทำหน้าที่เป็นไฟล์ประเภทอินพุตได้หรือไม่ ( แสดงกล่องโต้ตอบและ $ _FILE เดียวกันในหน้าที่ส่ง)
ฉันพบวิธีแก้ปัญหาบางอย่างที่นี่และสิ่งนี้ก็น่าสนใจเช่นกัน (แต่ใช้ไม่ได้กับ Chrome = /)

พวกคุณทำอะไรเมื่อคุณต้องการเพิ่มสไตล์ให้กับปุ่มไฟล์ของคุณ? หากคุณมีมุมมองใด ๆ เกี่ยวกับเรื่องนี้เพียงแค่กดปุ่มรับสาย;)

สิ่งนี้ได้ผลดีสำหรับฉัน:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

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

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

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

ผ่านการทดสอบใน Chrome แต่ตามเว็บควรใช้ได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด :)

แก้ไข: เพิ่ม JSFiddle ที่นี่: https://jsfiddle.net/c5s42vdz/

จริงๆแล้วสามารถทำได้ใน pure css และค่อนข้างง่าย ...

รหัส HTML

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS สไตล์

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

แนวคิดคือการวางตำแหน่งอินพุตให้อยู่ในป้ายกำกับของคุณ กำหนดขนาดแบบอักษรของอินพุตเป็นขนาดใหญ่ซึ่งจะเพิ่มขนาดของปุ่ม "เรียกดู" จากนั้นใช้เวลาลองผิดลองถูกโดยใช้คุณสมบัติลบด้านซ้าย / ด้านบนเพื่อวางตำแหน่งปุ่มเรียกดูข้อมูลเข้าด้านหลังป้าย

เมื่อวางตำแหน่งปุ่มให้ตั้งค่าอัลฟ่าเป็น 1 เมื่อคุณตั้งค่ากลับเป็น 0 เสร็จแล้ว (คุณจะได้เห็นว่าคุณกำลังทำอะไรอยู่!)

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

วิธีแก้ปัญหาที่ยอดเยี่ยมโดย @hardsetting แต่ฉันได้ปรับปรุงบางอย่างเพื่อให้ใช้งานได้กับ Safari (5.1.7) ใน windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

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

ฉันใช้visibility: hidden, width:0แทนdisplay: noneปัญหาซาฟารีและเพิ่มpointer-events: noneในimgแท็กเพื่อให้ใช้งานได้หากแท็กประเภทไฟล์อินพุตอยู่ในแท็กแบบฟอร์ม

ดูเหมือนจะใช้ได้กับฉันในเบราว์เซอร์หลัก ๆ ทั้งหมด

หวังว่ามันจะช่วยใครบางคน

ผมจะใช้SWFUploadหรือUploadify พวกเขาต้องการ Flash แต่ทำทุกอย่างที่คุณต้องการโดยไม่มีปัญหา

<input type="file">วิธีแก้ปัญหาตามพื้นฐานใด ๆที่พยายามทริกเกอร์กล่องโต้ตอบ "เปิดไฟล์" โดยวิธีอื่นนอกเหนือจากการคลิกที่ตัวควบคุมจริงอาจถูกลบออกจากเบราว์เซอร์ด้วยเหตุผลด้านความปลอดภัยได้ทุกเมื่อ (ฉันคิดว่าใน FF และ IE เวอร์ชันปัจจุบันเป็นไปไม่ได้อีกแล้วที่จะทริกเกอร์เหตุการณ์นั้นโดยใช้โปรแกรม)

นี่เป็นวิธีการของฉันถ้าฉันมีประเด็นของคุณ

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

มันง่ายมากคุณสามารถลองสิ่งนี้:

$("#image id").click(function(){
    $("#input id").click();
});

คุณสามารถใส่รูปภาพแทนและทำดังนี้:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

jQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

CAVEAT : ใน IE9 และ IE10 หากคุณทริกเกอร์ onclick ในการป้อนไฟล์ผ่านทาง javascript แบบฟอร์มจะถูกตั้งค่าสถานะว่า 'อันตราย' และไม่สามารถย่อยด้วยจาวาสคริปต์ได้ไม่แน่ใจว่าจะสามารถส่งแบบเดิมได้หรือไม่

อินพุตถูกซ่อนด้วยการมองเห็น CSS: hidden

จากนั้นคุณสามารถมีองค์ประกอบใดก็ได้ที่คุณต้องการไม่ว่าจะเป็นจุดยึดหรือรูปภาพ .. เมื่อมีการคลิกจุดยึด / รูปภาพให้คลิกที่ช่องป้อนข้อมูลที่ซ่อนอยู่กล่องโต้ตอบสำหรับการเลือกไฟล์จะปรากฏขึ้น

แก้ไข: จริงๆแล้วมันใช้งานได้ใน Chrome และ Safari ฉันเพิ่งสังเกตว่าไม่ใช่ใน FF4Beta

รหัสการทำงาน:

เพียงแค่ซ่อนส่วนอินพุตแล้วทำเช่นนี้

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

        form input[type="file"] {
          display: none;
        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

เรียกใช้ SNIPPET หรือเพียงแค่คัดลอกโค้ดด้านบนและดำเนินการ คุณจะได้รับสิ่งที่คุณต้องการ ง่ายมากและมีประสิทธิภาพโดยไม่ต้องใช้จาวาสคริปต์ สนุก!!!

ฉันมีปัญหามากมายเกี่ยวกับอินพุตที่ซ่อนอยู่และมองไม่เห็นในช่วงทศวรรษที่ผ่านมาบางครั้งสิ่งต่างๆก็ง่ายกว่าที่เราคิด

ฉันมีความปรารถนาเล็กน้อยกับ IE 5,6,7,8 และ 9 ที่ไม่รองรับความทึบดังนั้นการป้อนไฟล์จะครอบคลุมภาพที่อัปโหลดอย่างไรก็ตามรหัส css ต่อไปนี้ได้แก้ไขปัญหาแล้ว

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

สนิปต่อไปนี้ได้รับการทดสอบบน chrome IE 5,6,7,8,9,10 ปัญหาเดียวใน IE 5 คือไม่รองรับระยะขอบอัตโนมัติ

เรียกใช้ข้อมูลโค้ดเพียงแค่คัดลอกและวาง CSS และ HTML ปรับเปลี่ยนขนาดตามที่คุณต้องการ

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

วิธีที่ดีกว่าการเขียน JS คือการใช้เนทีฟและมันจะเบากว่าที่แนะนำ:

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

วิธีlabelนี้จะเชื่อมต่อกับอินพุตที่ซ่อนอยู่โดยอัตโนมัติ การคลิกที่ป้ายก็เหมือนกับการคลิกที่ฟิลด์

คุณสามารถแทนที่รูปภาพโดยอัตโนมัติด้วยรูปภาพที่เลือกใหม่

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>




<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>