เปิดกล่องโต้ตอบไฟล์ใน JavaScript

ฉันต้องการวิธีแก้ปัญหาเพื่อแสดงกล่องโต้ตอบเปิดไฟล์ใน HTML ในขณะที่คลิกไฟล์div. กล่องโต้ตอบเปิดไฟล์จะต้องเปิดขึ้นเมื่อdivคลิก

ฉันไม่ต้องการแสดงกล่องไฟล์อินพุตเป็นส่วนหนึ่งของหน้า HTML ต้องแสดงในกล่องโต้ตอบแยกต่างหากซึ่งไม่ใช่ส่วนหนึ่งของหน้าเว็บ

นี่เป็นสิ่งที่ดี

การสาธิต Fine Uploader

เป็นการ<input type='file' />ควบคุมตัวเอง แต่มีการวาง div ไว้ด้านบนและใช้สไตล์ css เพื่อให้ได้ความรู้สึกนั้น ความทึบของตัวควบคุมไฟล์ถูกตั้งค่าเป็น 0 เพื่อให้ดูเหมือนว่าหน้าต่างโต้ตอบจะเปิดขึ้นเมื่อคลิกที่ div

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

สำหรับ IE เพิ่มสิ่งนี้:

$("#logo").css('filter','alpha(opacity = 0');

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

แก้ไข: ใน Safari ที่ได้รับการปิดใช้งานเมื่อซ่อนอยู่ด้วยinput วิธีที่ดีที่จะใช้display: noneposition: fixed; top: -100em

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

หากคุณต้องการคุณสามารถไป"วิธีที่ถูกต้อง"โดยใช้forในการlabelชี้ไปidที่อินพุตดังนี้:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

จริงๆแล้วคุณไม่จำเป็นต้องมีความทึบการมองเห็นการ<input>จัดแต่งทรงผมและอื่น ๆ เพียงแค่ดู:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

การสาธิตในjsFiddle ทดสอบใน Chrome 30.0 และ Firefox 24.0 ไม่ทำงานใน Opera 12.16 อย่างไรก็ตาม

นี่คือสิ่งที่ได้ผลดีที่สุดสำหรับฉัน (ทดสอบบน IE8, FF, Chrome, Safari)

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

คำอธิบาย: ฉันวางตำแหน่งอินพุตไฟล์ไว้เหนือองค์ประกอบที่จะคลิกโดยตรงดังนั้นการคลิกใด ๆ ก็จะไปที่มันหรือป้ายกำกับ (ซึ่งจะดึงกล่องโต้ตอบการอัปโหลดขึ้นมาเหมือนกับว่าคุณคลิกที่ป้ายกำกับเอง) ฉันมีปัญหาบางอย่างกับส่วนปุ่มของอินพุตเริ่มต้นที่ยื่นออกมาจากด้านข้างของป้ายกำกับดังนั้นจึงจำเป็นต้องoverflow: hiddenป้อนข้อมูลและdisplay: inline-blockบนฉลาก

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

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

คำอธิบาย: for="Your input Id". ทริกเกอร์เหตุการณ์การคลิกโดยค่าเริ่มต้นโดย HTML ดังนั้นโดยค่าเริ่มต้นจะทริกเกอร์เหตุการณ์การคลิกไม่จำเป็นต้องใช้ jQuery / javascript ถ้าทำโดย HTML ทำไมต้องใช้ jQuery / jScript และคุณไม่สามารถบอกได้ว่าลูกค้าปิดการใช้งาน JS หรือไม่ ฟีเจอร์ของคุณควรใช้งานได้แม้ว่า JS จะปิดอยู่ก็ตาม

ทำงาน jsFiddle (คุณไม่จำเป็นต้องใช้ JS, jquery)

อันดับแรกเพิ่มในแท็กหัว :

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

หากคุณมีสคริปต์อยู่แล้วแท็กเพียงเพิ่มฟังก์ชันเหล่านี้ด้านบน

ในร่างกายของคุณหรือแท็กฟอร์มเพิ่ม:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

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

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

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

และหากคุณต้องการลบกล่องโต้ตอบที่เปิดอยู่คุณสามารถสร้างและใช้ฟังก์ชันต่อไปนี้:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

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

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

และถ้าคุณไม่ต้องการสร้างและเพิ่มกล่องโต้ตอบเปิดไฟล์ในแท็กbodyหรือformใน html เนื่องจากเป็นการเพิ่ม hidden input type = "file" s คุณสามารถทำได้ในสคริปต์โดยใช้ฟังก์ชัน create ด้านบน :

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มแท็กร่างกายหรือแบบฟอร์มไว้ใกล้ ๆ :

onload="yourBodyOrFormId_onload()"

คุณไม่จำเป็นต้องทำบรรทัดนี้ด้านบนถ้าคุณทำไปแล้ว

เคล็ดลับ:คุณสามารถเพิ่มไฟล์ JScript ใหม่ในโปรเจ็กต์หรือเว็บไซต์ของคุณได้หากคุณยังไม่มีและในไฟล์นี้คุณสามารถวางฟังก์ชั่นไดอะล็อกไฟล์ที่เปิดอยู่ทั้งหมดไว้ห่างจากแท็กสคริปต์และ html หรือหน้าเว็บฟอร์มและใช้ ไว้ใน html หรือหน้าเว็บฟอร์มของคุณจากไฟล์ JScript นี้ แต่อย่าลืมก่อนที่จะเชื่อมโยงหน้า html หรือเว็บฟอร์มกับไฟล์ JScript แน่นอน คุณสามารถทำได้เพียงลากไฟล์ JScript ไปที่หน้า html ของคุณในไฟล์หัวแท็ก หากหน้าของคุณเป็นรูปแบบเว็บไม่ใช่ html ธรรมดาและคุณไม่มีแท็กหัวให้วางไว้ที่ใดก็ได้เพื่อให้สามารถใช้งานได้ อย่าลืมกำหนดตัวแปรส่วนกลางในไฟล์ JScript ซึ่งค่าจะเป็น body หรือ form id เป็นสตริง หลังจากที่คุณเชื่อมโยงไฟล์ JScript กับหน้า html หรือเว็บฟอร์มของคุณแล้วคุณสามารถ onload เหตุการณ์ของ body of form ตั้งค่าของตัวแปรนั้นเป็น body หรือ form id ของคุณ จากนั้นในไฟล์ JScript คุณไม่จำเป็นต้องให้ id ของเนื้อหาหรือรูปแบบของหน้าเดียวกับเอกสารอีกต่อไปเพียงแค่ให้ค่าของตัวแปรนั้น คุณสามารถเรียกตัวแปรbodyIdหรือformIdหรือbodyOrFormIdหรือชื่ออื่น ๆ ที่คุณต้องการได้

ขอให้โชคดี!

วิธีที่ง่ายที่สุด:

#file-input {
  display: none;
}

<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

สิ่งที่สำคัญคือการใช้งานdisplay: noneเพื่อให้แน่ใจว่าจะไม่มีที่ใดถูกครอบครองโดยอินพุตไฟล์ที่ซ่อนอยู่ (สิ่งที่เกิดขึ้นโดยใช้opacity: 0)

AFAIK คุณยังต้องการ<input type="file">องค์ประกอบจากนั้นคุณสามารถใช้บางสิ่งจากโหมดนิสัยใจคอเพื่อจัดสไตล์ได้

สิ่งเดียวที่ไม่มี<input type="file">คือการฝังภาพเคลื่อนไหวแฟลชโปร่งใสไว้บน div จากนั้นคุณสามารถใช้ที่ผู้ใช้สร้างเหตุการณ์ค (สอดคล้องกับ Flash 10 กฎความปลอดภัยใหม่) ที่จะเรียกเรียกร้องให้แฟลชของFileReference.browse

มันมีการพึ่งพาที่เพิ่มเข้ามาในโหมด quirksmodeแต่ในทางกลับกันคุณจะได้รับกิจกรรมมากมาย (เช่นเหตุการณ์ที่สร้างขึ้นในความคืบหน้า)

อาจใช้

$('<input type="file" />').click()