Xóa <input type = 'file' /> bằng jQuery

Có thể xóa <input type='file' />giá trị kiểm soát với jQuery không? Tôi đã thử như sau:

$('#control').attr({ value: '' }); 

Nhưng nó không hoạt động.

Dễ dàng: bạn bọc một <form>phần tử xung quanh, gọi lại thiết lập trên biểu mẫu, sau đó xóa biểu mẫu bằng cách sử dụng .unwrap(). Không giống như các .clone()giải pháp khác trong luồng này, bạn kết thúc với cùng một phần tử ở cuối (bao gồm các thuộc tính tùy chỉnh được đặt trên nó).

Đã thử nghiệm và làm việc trong Opera, Firefox, Safari, Chrome và IE6 +. Cũng hoạt động trên các loại yếu tố hình thức khác, ngoại trừ type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

Câu đố

Như Timo lưu ý bên dưới, nếu bạn có các nút để kích hoạt thiết lập lại trường bên trong <form>, bạn phải gọi .preventDefault()sự kiện để ngăn không cho <button>kích hoạt gửi.

BIÊN TẬP

Không hoạt động trong IE 11 do lỗi không được trộn. Văn bản (tên tệp) bị xóa trên đầu vào, nhưng Filedanh sách của nó vẫn được điền.

Trả lời nhanh: thay thế nó.

Trong đoạn mã dưới đây, tôi sử dụng replaceWithphương thức jQuery để thay thế điều khiển bằng bản sao của chính nó. Trong trường hợp bạn có bất kỳ trình xử lý nào bị ràng buộc với các sự kiện trong điều khiển này, chúng tôi cũng sẽ muốn bảo vệ chúng. Để làm điều này, chúng ta truyền vào truenhư là tham số đầu tiên của clonephương thức.

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

Câu đố: http://jsfiddle.net/jonathansampson/dAQVM/

Nếu nhân bản, trong khi bảo quản trình xử lý sự kiện, sẽ trình bày bất kỳ vấn đề nào bạn có thể xem xét khi sử dụng phân quyền sự kiện để xử lý các nhấp chuột vào điều khiển này từ phần tử cha:

$("form").on("focus", "#control", doStuff);

Điều này ngăn không cho bất kỳ trình xử lý nào được sao chép cùng với phần tử khi điều khiển đang được làm mới.

Jquery có nhiệm vụ giải quyết các vấn đề về trình duyệt chéo / trình duyệt cũ hơn cho bạn.

Điều này hoạt động trên các trình duyệt hiện đại mà tôi đã thử nghiệm: Chromium v25, Firefox v20, Opera v12.14

Sử dụng jquery 1.9.1

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

Jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

Trên jsfiddle

Giải pháp javascript sau đây cũng hoạt động với tôi trên các trình duyệt được đề cập ở trên.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

Trên jsfiddle

Tôi không có cách nào để kiểm tra với IE, nhưng về mặt lý thuyết thì nó sẽ hoạt động. Nếu IE đủ khác để phiên bản Javascript không hoạt động vì MS đã thực hiện theo cách khác, thì theo tôi, phương pháp jquery sẽ giải quyết nó cho bạn, nếu không thì nó sẽ đáng để chỉ ra cho nhóm jquery cùng với phương pháp mà IE yêu cầu. (Tôi thấy mọi người nói rằng "cái này sẽ không hoạt động trên IE", nhưng không có javascript nào để hiển thị cách nó hoạt động trên IE (được cho là "tính năng bảo mật"?), Có lẽ cũng báo cáo đó là một lỗi cho MS (nếu họ cũng sẽ đếm nó như vậy), để nó được sửa trong bất kỳ bản phát hành mới nào)

Giống như được đề cập trong một câu trả lời khác, một bài đăng trên diễn đàn jquery

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

Nhưng jquery hiện đã gỡ bỏ hỗ trợ để kiểm tra trình duyệt, jquery.browser.

Giải pháp javascript này cũng hoạt động với tôi, nó là vanilla tương đương với phương thức jquery.replaceWith .

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Trên jsfiddle

Điều quan trọng cần lưu ý là phương thức cloneNode không bảo tồn các trình xử lý sự kiện liên quan.

Xem ví dụ này.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Trên jsfiddle

Nhưng jquery.clone cung cấp điều này ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Trên jsfiddle

^{[* 1]} jquery có thể làm điều này nếu các sự kiện được thêm vào bằng các phương thức của jquery vì nó giữ một bản sao trong jquery.data , nó không hoạt động khác, vì vậy đó là một chút gian lận / xung quanh và có nghĩa là mọi thứ không tương thích giữa các phương pháp hoặc thư viện khác nhau.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Trên jsfiddle

Bạn không thể lấy trình xử lý sự kiện đính kèm trực tiếp từ chính phần tử.

Đây là nguyên tắc chung trong javascript vanilla, đây là cách jquery tất cả các thư viện khác làm điều đó (đại khái).

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

Trên jsfiddle

Tất nhiên jquery và các thư viện khác có tất cả các phương thức hỗ trợ khác cần thiết để duy trì một danh sách như vậy, đây chỉ là một minh chứng.

Vì lý do bảo mật rõ ràng, bạn không thể đặt giá trị của đầu vào tệp, ngay cả thành một chuỗi trống.

Tất cả những gì bạn phải làm là đặt lại biểu mẫu nơi trường hoặc nếu bạn chỉ muốn đặt lại mục nhập tệp của biểu mẫu có chứa các trường khác, hãy sử dụng:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

Đây là một ví dụ: http://jsfiddle.net/v2SZJ/1/

Điều này làm việc cho tôi.

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

Hy vọng nó giúp.

Trong IE8, họ đã tạo trường Tải lên tệp chỉ đọc để bảo mật. Xem bài đăng trên blog của nhóm IE :

Trong lịch sử, Kiểm soát tải lên tệp HTML () là nguồn gốc của một số lỗ hổng công bố thông tin đáng kể. Để giải quyết các vấn đề này, hai thay đổi đã được thực hiện đối với hành vi của kiểm soát.

Để chặn các cuộc tấn công dựa vào việc đánh cắp các tổ hợp phím của Google để lén lút lừa người dùng nhập một đường dẫn tệp cục bộ vào điều khiển, hộp chỉnh sửa Đường dẫn tệp hiện chỉ đọc. Người dùng phải chọn rõ ràng một tệp để tải lên bằng hộp thoại Duyệt tệp.

Ngoài ra, đường dẫn thư mục cục bộ của Bao gồm khi tải lên tập tin, URL URLAction đã được đặt thành "Tắt" cho Vùng Internet. Thay đổi này ngăn chặn rò rỉ thông tin hệ thống tệp cục bộ có khả năng nhạy cảm với Internet. Chẳng hạn, thay vì gửi đường dẫn đầy đủ C: \ users \ ericlaw \ Documents \ secret \ image.png, Internet Explorer 8 giờ đây sẽ chỉ gửi tên tệp image.png.

$("#control").val('')là tất cả những gì bạn cần! Đã thử nghiệm trên Chrome bằng JQuery 1.11

Những người dùng khác cũng đã thử nghiệm trên Firefox.

Tôi đã bị mắc kẹt với tất cả các tùy chọn ở đây. Đây là một bản hack mà tôi đã thực hiện:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

và bạn có thể kích hoạt thiết lập lại bằng jQuery với một mã tương tự như sau:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/ )

Tôi đã kết thúc với điều này:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

có thể không phải là giải pháp tao nhã nhất, nhưng nó hoạt động theo như tôi có thể nói.

Tôi đã sử dụng https://github.com/malsup/form/blob/master/jquery.form.js , có một chức năng được gọi clearInputs()là crossbrowser, được kiểm tra tốt, dễ sử dụng và xử lý cả vấn đề IE và xóa trường ẩn Nếu cần thiết. Có thể một giải pháp dài để chỉ xóa đầu vào tệp, nhưng nếu bạn đang xử lý tải lên tệp crossbrowser, thì giải pháp này được khuyến nghị.

Việc sử dụng rất dễ dàng:

// Xóa tất cả các trường tệp:
$ ("đầu vào: tệp"). clearInputs ();

// Xóa các trường cũng ẩn:
$ ("input: file"). clearInputs (true);

// Xóa các trường cụ thể:
$ ("# myfilefield1, # ​​myfilefield2"). ClearInputs ();

/ **
 * Xóa các phần tử biểu mẫu đã chọn.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: màu | ngày | datetime | email | tháng | số | mật khẩu | phạm vi | tìm kiếm | tel | văn bản | thời gian | url | tuần) $ / i; // 'hidden' không có trong danh sách này
    trả về this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this .value = '';
        }
        khác nếu (t == 'hộp kiểm' | | t == 'radio') {
            this .checked = false;
        }
        khác if (tag == 'select') {
            this.selected Index = -1;
        }
        khác nếu (t == "tập tin") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (này) .replaceWith ($ (này) .clone (đúng));
            } khác {
                $ (này) .val ('');
            }
        }
        khác nếu (bao gồm cả)
            // includeHidden có thể là giá trị true hoặc nó có thể là chuỗi chọn
            // chỉ ra một bài kiểm tra đặc biệt; ví dụ:
            // $ ('# myForm'). clearForm ('. Special: hidden')
            // ở trên sẽ dọn sạch các đầu vào ẩn có lớp 'đặc biệt'
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                this .value = '';
        }
    });
};

Giá trị của đầu vào tệp chỉ được đọc (vì lý do bảo mật). Bạn không thể xóa nó theo chương trình (ngoài cách gọi phương thức reset () của biểu mẫu, có phạm vi rộng hơn chỉ trường đó).

Tôi đã có thể làm cho tôi làm việc với mã sau đây:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

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 dành 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 .clone()điều nào không làm việc trong Opera (và có thể những người khác). Nó giữ nội dung.

Phương pháp gần nhất ở đây đối với tôi là của Jonathan trước đó, tuy nhiên đảm bảo rằng trường giữ nguyên tên, các lớp, v.v. được tạo cho mã lộn xộn trong trường hợp của tôi.

Một cái gì đó như thế này có thể hoạt động tốt (cũng nhờ Quentin):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Tôi đã quản lý để làm cho điều này hoạt động bằng cách sử dụng ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

Điều này đã được thử nghiệm trong IE10, FF, Chrome & Opera.

Có hai hãy cẩn thận ...

1. Vẫn không hoạt động chính xác trong FF, nếu bạn làm mới trang, phần tử tệp sẽ được điền lại với tệp đã chọn. Nơi mà nó nhận được thông tin này là ngoài tôi. Những gì khác liên quan đến một yếu tố đầu vào tập tin tôi có thể cố gắng để xóa?

2. Hãy nhớ sử dụng ủy quyền cho bất kỳ sự kiện nào bạn đã đính kèm vào phần tử nhập tệp, để chúng vẫn hoạt động khi bản sao được tạo.

Điều tôi không hiểu là ai trên trái đất nghĩ rằng không cho phép bạn xóa trường nhập liệu khỏi lựa chọn tệp không hợp lệ là một ý tưởng tốt?

OK, đừng để tôi tự động đặt nó với một giá trị để tôi không thể lọc các tệp từ HĐH của người dùng, nhưng hãy để tôi xóa lựa chọn không hợp lệ mà không đặt lại toàn bộ biểu mẫu.

Dù sao thì nó cũng không giống như 'chấp nhận', ngoài bất kỳ bộ lọc nào và trong IE10, nó thậm chí còn không hiểu các loại mime MS Word, đó là một trò đùa!

Trên Firefox 40.0.3 của tôi chỉ hoạt động với cái này

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));

nó hoạt động với tôi trong mọi trình duyệt.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

Tôi đã thử với hầu hết các kỹ thuật mà người dùng đề cập, nhưng không có kỹ thuật nào trong số đó làm việc trong tất cả các trình duyệt. tức là: clone () không hoạt động trong FF cho đầu vào tệp. Tôi đã kết thúc việc sao chép thủ công đầu vào tập tin, và sau đó thay thế bản gốc bằng bản sao chép. Nó hoạt động trong tất cả các trình duyệt.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

Điều này hoạt động với Chrome, FF và Safari

$("#control").val("")

Có thể không hoạt động với IE hoặc Opera

Làm cho nó không đồng bộ và đặt lại sau khi các hành động mong muốn của nút đã được thực hiện.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

nó không hoạt động với tôi:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

Vì vậy, trong asp mvc tôi sử dụng các tính năng dao cạo để thay thế đầu vào tập tin. lúc đầu, hãy tạo một biến cho chuỗi đầu vào bằng Id và Tên, sau đó sử dụng nó để hiển thị trên trang và thay thế vào nút đặt lại, nhấp:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

Một cách dễ dàng là thay đổi loại đầu vào và thay đổi lại.

Một cái gì đó như thế này:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

Bạn có thể thay thế nó bằng bản sao của nó như vậy

var clone = $('#control').clone();

$('#control').replacewith(clone);

Nhưng bản sao này với giá trị của nó quá để bạn có thể thích

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

Thật dễ dàng lol (hoạt động trong tất cả các trình duyệt [trừ opera]):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

Câu đố về JS: http://jsfiddle.net/cw84x/1/

Gì? Trong chức năng xác nhận của bạn, chỉ cần đặt

document.onlyform.upload.value="";

Giả sử tải lên là tên:

<input type="file" name="upload" id="csv_doc"/>

Tôi đang sử dụng JSP, không chắc điều đó có làm nên sự khác biệt ...

Làm việc cho tôi, và tôi nghĩ rằng nó dễ dàng hơn.