Câu trả lời:
Làm thế nào về việc loại bỏ nút đó, tạo một nút mới có cùng tên?
Có 3 cách để xóa đầu vào tệp bằng javascript:
đặt thuộc tính giá trị thành rỗng hoặc null.
Hoạt động cho IE11 + và các trình duyệt hiện đại khác.
Tạo một phần tử nhập tệp mới và thay thế phần tử cũ.
Nhược điểm là bạn sẽ mất người nghe sự kiện và thuộc tính mở rộng.
Đặt lại biểu mẫu chủ sở hữu thông qua phương thức form.reset ().
Để tránh ảnh hưởng đến các thành phần đầu vào khác trong cùng một hình thức chủ sở hữu, chúng tôi có thể tạo một biểu mẫu trống mới và nối phần tử nhập tệp vào biểu mẫu mới này và đặt lại nó. Cách này hoạt động cho tất cả các trình duyệt.
Tôi đã viết một hàm javascript. bản demo: http://jsbin.com/muhipoye/1/
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){ }
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'),
parentNode = f.parentNode, ref = f.nextSibling;
form.appendChild(f);
form.reset();
parentNode.insertBefore(f,ref);
}
}
}tl; dr : Đối với các trình duyệt hiện đại, chỉ cần sử dụng
input.value = '';Làm thế nào về:
input.type = "text";
input.type = "file";Tôi vẫn phải hiểu tại sao điều này không hoạt động với webkit .
Dù sao, điều này hoạt động với IE9>, Firefox và Opera.
Tình huống với webkit là tôi dường như không thể thay đổi nó trở lại thành tập tin.
Với IE8, tình huống là nó ném một ngoại lệ bảo mật.
Chỉnh sửa: Đối với webkit, Opera và firefox, điều này hoạt động, mặc dù:
input.value = '';(kiểm tra câu trả lời trên với đề xuất này)
Tôi sẽ xem liệu tôi có thể tìm thấy một cách sạch đẹp hơn để làm trình duyệt chéo này mà không cần đến GC không.
Chỉnh sửa2:
try{
inputs[i].value = '';
if(inputs[i].value){
inputs[i].type = "text";
inputs[i].type = "file";
}
}catch(e){}Hoạt động với hầu hết các trình duyệt. Không hoạt động với IE <9, chỉ vậy thôi.
Đã thử nghiệm trên firefox 20, chrome 24, opera 12, IE7, IE8, IE9 và IE10.
Đặt giá trị thành ''không hoạt động trong tất cả các trình duyệt.
Thay vào đó, hãy thử đặt giá trị nullnhư vậy:
document.getElementById('your_input_id').value= null;EDIT: Tôi có các lý do bảo mật rất hợp lệ khi không cho phép JS đặt đầu vào tệp, tuy nhiên có vẻ hợp lý khi cung cấp một cơ chế đơn giản để xóa đầu ra đã chọn. Tôi đã thử sử dụng một chuỗi trống nhưng nó không hoạt động trong tất cả các trình duyệt, NULLhoạt động trong tất cả các trình duyệt tôi đã thử (Opera, Chrome, FF, IE11 + và Safari).
EDIT: Xin lưu ý rằng cài đặt NULLhoạt động trên tất cả các trình duyệt trong khi cài đặt thành một chuỗi trống thì không.
all browsers... nó không hoạt động trong IE8, IE9 hoặc IE10 (nhưng không hoạt động trong IE11).
Thật không may, không có câu trả lời nào ở trên xuất hiện để bao gồm tất cả các cơ sở - ít nhất là không phải với thử nghiệm của tôi với javilla javascript.
.value = nulldường như hoạt động trên FireFox, Chome, Opera và IE11 (nhưng không phải IE8 / 9/10)
.cloneNode(và .clone()trong jQuery) trên FireFox dường như sao chép .valuelại, do đó làm cho bản sao trở nên vô nghĩa.
Vì vậy, đây là chức năng javascript vanilla tôi đã viết hoạt động trên FireFox (27 và 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... đây là những trình duyệt duy nhất hiện có để tôi kiểm tra với.
function clearFileInput(ctrl) {
try {
ctrl.value = null;
} catch(ex) { }
if (ctrl.value) {
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
}
}Các ctrltham số là các tập tin đầu vào chính nó, vì vậy các chức năng sẽ được gọi là ...
clearFileInput(document.getElementById("myFileInput"));ifđặt câu lệnh bên trong catchkhối?
null. Tâm trí để giải thích những gì điểm đặt ctrl.value = null;trong một try...catchkhối sau đó? Xin lỗi cho câu hỏi newb.
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);- tại điểm nào thực sự chúng ta xóa giá trị, vì cloneNodecũng sao chép nó?
Đoạn mã sau làm việc với tôi với jQuery. Nó hoạt động trong mọi trình duyệt và cho phép bảo tồn các sự kiện và thuộc tính tùy chỉnh.
var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();Xem jsFiddle này cho mã và trình diễn.
Bạn cần thay thế nó bằng đầu vào tập tin mới. Đây là cách nó có thể được thực hiện với jQuery:
var inputFile = $('input[type=field]');
inputFile.wrap('<div />');và sử dụng dòng này khi bạn cần xóa trường nhập (ví dụ: trong một số sự kiện):
inputFile.parent().html( inputFile.parent().html() );document.getElementById('your_input_id').value=''Chỉnh sửa:
Cái này không hoạt động trong IE và opera, nhưng dường như hoạt động cho firefox, safari và chrome.
Tôi đã có cùng một vấn đề và tôi đã đưa ra điều này.
var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';
document.querySelector('button').onclick = function(){
file.files = emptyFile.files;
}<input type='file'>
<button>clear</button>Tôi đã tìm kiếm cách đơn giản và rõ ràng để xóa đầu vào tệp HTML, các câu trả lời trên rất hay, nhưng không ai trong số họ thực sự trả lời những gì tôi đang tìm kiếm, cho đến khi tôi tìm thấy trên web một cách đơn giản để làm điều đó:
var $input = $("#control");
$input.replaceWith($input.val('').clone(true));tất cả các khoản tín dụng cho Chris Coyier .
// Referneces
var control = $("#control"),
clearBn = $("#clear");
// Setup the clear functionality
clearBn.on("click", function(){
control.replaceWith( control.val('').clone( true ) );
});
// Some bound handlers to preserve when cloning
control.on({
change: function(){ console.log( "Changed" ) },
focus: function(){ console.log( "Focus" ) }
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>Các câu trả lời trên cung cấp các giải pháp hơi vụng về vì những lý do sau:
Tôi không thích phải wrapcác inputđầu tiên và sau đó nhận được html, nó rất liên quan và dơ bẩn.
Trình duyệt chéo JS rất tiện dụng và dường như trong trường hợp này có quá nhiều ẩn số đáng tin cậy để sử dụng typechuyển đổi (một lần nữa, hơi bẩn) và đặt valuethành''
Vì vậy, tôi cung cấp cho bạn giải pháp dựa trên jQuery của tôi:
$('#myinput').replaceWith($('#myinput').clone())Nó làm những gì nó nói, nó thay thế đầu vào bằng một bản sao của chính nó. Bản sao sẽ không có tập tin được chọn.
Ưu điểm:
Kết quả: Chúc mừng lập trình viên
Cross browser compatibility... thử nghiệm của tôi cho thấy rằng các bản sao của FireFox .valuelà một phần của .clone(), do đó khiến nó trở nên vô dụng
replaceWith? Tôi đang sử dụng clone()bản thân và nó hoạt động tốt trong firefox (Tôi không biết liệu đây có phải là trường hợp của bạn một năm sau không =))
Điều giúp tôi là, tôi đã cố gắng tìm nạp và tải lên tệp đã chọn cuối cùng bằng cách sử dụng một vòng lặp, thay vì xóa hàng đợi và nó đã hoạt động. Đây là mã.
for (int i = 0; i <= Request.Files.Count-1; i++)
{
HttpPostedFileBase uploadfile = files[i];
Stream fs = uploadfile.InputStream;
BinaryReader br = new BinaryReader(fs);
Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}Hy vọng điều này có thể giúp một số.
Tôi đã thử hầu hết các giải pháp nhưng dường như không có ai làm việc. Tuy nhiên tôi tìm thấy một đi bộ xung quanh cho nó dưới đây.
Cấu trúc của biểu mẫu là: form=> label, inputvà submit button. Sau khi chúng tôi chọn một tệp, tên tệp sẽ được hiển thị bởi nhãn bằng cách thực hiện thủ công trong JavaScript.
Vì vậy, chiến lược của tôi là: ban đầu việc gửi buttonbị vô hiệu hóa, sau khi một tệp được chọn, disabledthuộc tính nút gửi sẽ bị xóa để tôi có thể gửi tệp. Sau khi tôi gửi, tôi xóa labelcái trông giống như tôi xóa tệp inputnhưng thực tế thì không. Sau đó, tôi sẽ vô hiệu hóa nút gửi lại để ngăn gửi biểu mẫu.
Bằng cách cài đặt gửi button disablehoặc không, tôi dừng tệp gửi nhiều lần trừ khi tôi chọn tệp khác.
Tôi đã thay đổi để nhập văn bản và quay lại nhập vào tệp bằng setAttribution
'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'
'var input=document.querySelector('#filepicture');'
if(input != null)
{
input.setAttribute("type", "text");
input.setAttribute("type", "file");
}