Mở hộp thoại tệp bằng JavaScript

Tôi cần một giải pháp để hiển thị hộp thoại tệp đang mở trong HTML khi nhấp vào a div. Hộp thoại mở tệp phải mở khi divđược nhấp.

Tôi không muốn hiển thị hộp tệp đầu vào như một phần của trang HTML. Nó phải được hiển thị trong hộp thoại riêng biệt, không phải là một phần của trang web.

Đây là một cái hay

Bản trình diễn Trình tải lên tốt

Nó là một sự <input type='file' />kiểm soát chính nó. Nhưng một div được đặt trên đó và các kiểu css được áp dụng để có được cảm giác đó. Độ mờ của điều khiển tệp được đặt thành 0 để xuất hiện cửa sổ hộp thoại được mở khi nhấp vào 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">

cho IE thêm cái này:

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

Tôi không biết tại sao không ai chỉ ra điều này nhưng đây là một cách thực hiện mà không cần bất kỳ Javascript nào và nó cũng tương thích với bất kỳ trình duyệt nào.

CHỈNH SỬA: Trong Safari, tính năng này inputbị vô hiệu hóa khi ẩn với display: none. Một cách tiếp cận tốt hơn sẽ là sử dụng position: fixed; top: -100em.

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

Nếu bạn muốn, bạn có thể đi theo "cách chính xác" bằng cách sử dụng fortrong labeltrỏ tới idđầu vào như sau:

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

Trên thực tế, bạn không cần tất cả những thứ đó với độ mờ, khả năng hiển thị, <input>kiểu dáng, v.v. Chỉ cần xem:

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

Demo trên jsFiddle . Đã thử nghiệm trong Chrome 30.0 và Firefox 24.0. Tuy nhiên, không hoạt động trong Opera 12.16.

Đây là những gì hoạt động tốt nhất đối với tôi (Đã thử nghiệm trên 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>

Giải thích: Tôi đã định vị đầu vào tệp ngay phía trên phần tử được nhấp, vì vậy bất kỳ lần nhấp nào cũng sẽ đến trên nó hoặc nhãn của nó (điều này sẽ kéo hộp thoại tải lên giống như khi bạn nhấp vào chính nhãn đó). Tôi đã gặp một số vấn đề với phần nút của đầu vào mặc định nhô ra khỏi cạnh của nhãn, vì vậy overflow: hiddenphần đầu vào và display: inline-blocktrên nhãn là cần thiết.

Điều gì sẽ xảy ra nếu javascript bị Tắt trên máy khách? Sử dụng giải pháp sau cho tất cả các tình huống. Bạn thậm chí không cần 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;
}

Giải thích: for="Your input Id". Kích hoạt sự kiện nhấp chuột theo mặc định theo HTML. Vì vậy, nó mặc định kích hoạt sự kiện nhấp chuột, không cần jQuery / javascript. Nếu nó được thực hiện đơn giản bằng HTML tại sao lại sử dụng jQuery / jScript? Và bạn không thể biết liệu khách hàng có tắt JS hay không. Tính năng của bạn sẽ hoạt động ngay cả khi JS bị tắt.

Làm việc jsFiddle (Bạn không cần JS, jquery)

Đầu tiên hãy thêm vào các thẻ head :

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

nếu bạn đã có các thẻ script , chỉ cần thêm các chức năng này ở trên.

Trong cơ thể hoặc thẻ biểu mẫu của bạn thêm:

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

Không có vấn đề gì trong html của bạn, giống như bạn đã tạo một phiên bản mới của loại OpenFileDialog lớp làm biến toàn cục, có tên là id của phần tử, bất kể ở đâu trong mã hoặc xaml, nhưng trong tập lệnh hoặc mã của bạn , bạn không thể nhập tên của anh ấy, rồi đọc một thuộc tính hoặc gọi một hàm, vì có những hàm toàn cục thực hiện những hàm đó không được xác định trong phần tử input type = "file". Bạn chỉ cần cung cấp cho các hàm này id của kiểu đầu vào ẩn = "tệp" là tên của cá thể OpenFileDialog dưới dạng chuỗi.

Để giúp bạn dễ dàng hơn trong việc tạo các phiên bản hộp thoại tệp mở cho html của mình, bạn có thể tạo một hàm thực hiện điều đó:

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

và nếu bạn muốn loại bỏ hộp thoại tệp đang mở, thì bạn có thể tạo và sử dụng chức năng sau:

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

nhưng trước khi bạn xóa hộp thoại tệp đang mở, hãy đảm bảo rằng hộp thoại đó tồn tại bằng cách tạo và sử dụng hàm sau:

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

và nếu bạn không muốn để tạo ra và thêm các hộp thoại tập tin mở trong cơ thể hoặc dạng thẻ trong html, bởi vì đây là thêm ẩn input type = "file" s, sau đó bạn có thể làm điều đó trong kịch bản bằng cách sử dụng chức năng tạo ra ở trên :

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

Đảm bảo rằng gần thẻ body hoặc thẻ biểu mẫu của bạn, bạn đã thêm:

onload="yourBodyOrFormId_onload()"

Bạn không cần phải làm dòng này ở trên, nếu bạn đã làm.

MẸO: Bạn có thể thêm vào dự án hoặc trang web của mình Tệp JScript mới, nếu bạn chưa có, và trong tệp này, bạn có thể đặt tất cả các chức năng hộp thoại tệp đang mở khỏi các thẻ tập lệnh và trang html hoặc trang web, và sử dụng chúng trong html hoặc trang biểu mẫu web của bạn từ tệp JScript này, nhưng đừng quên trước đó liên kết trang html hoặc trang biểu mẫu web với Tệp JScript. Bạn có thể làm điều đó chỉ bằng cách kéo tệp JScript vào trang html của bạn trong đầucác thẻ. Nếu trang của bạn là dạng web chứ không phải html đơn giản và bạn không có thẻ head, thì hãy đặt nó ở bất kỳ đâu để nó có thể hoạt động. Đừng quên xác định biến toàn cục trong Tệp JScript đó, giá trị của nó sẽ là nội dung hoặc id biểu mẫu của bạn dưới dạng chuỗi. Sau khi bạn liên kết tệp JScript với trang html hoặc trang biểu mẫu web của mình, bạn có thể tải lên sự kiện của nội dung biểu mẫu, đặt giá trị của biến đó thành nội dung hoặc id biểu mẫu của bạn. Sau đó, trong Tệp JScript, bạn không cần phải cung cấp cho tài liệu id của nội dung hoặc biểu mẫu của một trang nữa, chỉ cần cung cấp cho nó giá trị của biến đó. Bạn có thể gọi đó là biến bodyId hoặc formId hoặc bodyOrFormId hoặc bất kỳ tên khác mà bạn muốn.

Chúc bạn may mắn!

Cách đơn giản nhất:

#file-input {
  display: none;
}

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

Điều quan trọng, việc sử dụng display: noneđảm bảo rằng không có vị trí nào sẽ bị chiếm bởi đầu vào tệp ẩn (điều gì xảy ra khi sử dụng opacity: 0).

AFAIK bạn vẫn cần một <input type="file">phần tử, sau đó bạn có thể sử dụng một số công cụ từ mã quirksmode để tạo kiểu cho nó

Cách duy nhất không có <input type="file">là nhúng một đoạn phim flash trong suốt lên div. Sau đó, bạn có thể sử dụng sự kiện nhấp chuột do người dùng tạo (tuân thủ 10 quy tắc bảo mật mới của Flash) để kích hoạt lệnh gọi đến FileReference.browse của flash .

Nó cung cấp một sự phụ thuộc bổ sung theo cách quirksmode nhưng đổi lại bạn nhận được nhiều sự kiện hơn (chẳng hạn như các sự kiện được xây dựng trong tiến trình).

Có thể sử dụng

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