Tạo nút đa mục đích trong html

Question

Khi trên điện thoại, tôi không thể xem hai nút này vì chúng quá xa nhau. Tôi muốn làm như vậy sau khi bạn chọn tệp, nút 'chọn tệp' sẽ được thay thế bằng nút tải lên. Điều này có thể. Tôi phải làm gì đây?

http://goawaymom.com/buttons.png

html của tôi -

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
    <input name="file" type="file"class="box"/>   
    <input type="submit" id="mybut" value="Upload" name="Submit"/> 
</form> 

-Lưu ý Tôi không quan tâm để đặt chúng vào dòng riêng biệt hoặc làm cho phông chữ smaller- vv

Answer 1

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

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
     <input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>   
     <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/> 
    </form>  

Without Jquery, Chỉ Javascript

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
     <input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>   
     <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/> 
    </form> 

Answer 2

<script type="text/javascript"> 
$(function() { 
$("input:file").change(function(){ 
    var fileName = $(this).val(); 
    if(fileName){ 
     remove chose file button and show upload button(visible property) 
    } 

}); 
}); 

séc jQuery - Detecting if a file has been selected in the file input

Answer 3

Vâng, thực sự rất dễ dàng. Bạn có thể nghe onchange sự kiện nhập tệp và ẩn nó.

HTML:

<input name="inpt" type="file"/> 
<input type="button" value="Upload"/> 

Javascript:

//this event is fired when the file is chosen (not when user presses the cancel button) 
inpt.onchange = function(e) { 
    //setting display to "none" hides an element 
    inpt.style.display="none"; 
}; 

JSfiddle

PS. nếu bạn muốn, bạn có thể sử dụng cùng một mẹo để hiển thị nút "Tải lên" chỉ khi tệp được chọn. Trong trường hợp đó, mã nút sẽ là <input id="btn" type="button" value="Upload" style="display:none"/> và trong mã Javascript bạn viết btn.style.display="" để hiển thị nút.

Answer 4

Tôi có thể nói rằng có nhiều cách để thực hiện. Nhưng trong java script lõi dưới đây là cách tiếp cận

(1) Ban đầu thiết lập các phong cách hiển thị các nút tải lên không ai sánh kịp để giấu rằng

(2) Viết onchange xử lý sự kiện cho loại tập tin đầu vào

(3) Trong hàm xử lý đó nếu giá trị không rỗng thì ẩn tệp đầu vào bằng cách áp dụng kiểu hiển thị không và sau đó thay đổi kiểu nút tải lên thành trống ('').

Hope phương pháp này làm việc