ฉันจะล้างอินพุตไฟล์ HTML ด้วย JavaScript ได้อย่างไร

ฉันต้องการล้างอินพุตไฟล์ในแบบฟอร์มของฉัน

ฉันรู้เกี่ยวกับการตั้งค่าแหล่งที่มาเป็นวิธีการเดียวกัน ... แต่วิธีการนั้นจะไม่ลบเส้นทางไฟล์ที่เลือก

หมายเหตุ : ฉันต้องการหลีกเลี่ยงการโหลดหน้าเว็บใหม่รีเซ็ตฟอร์มหรือทำการโทร AJAX

เป็นไปได้ไหม

วิธีการเกี่ยวกับการลบโหนดนั้นสร้างใหม่ที่มีชื่อเดียวกัน?

มี 3 วิธีในการล้างอินพุตไฟล์ด้วย javascript:

1. ตั้งค่าคุณสมบัติเป็นค่าว่างหรือว่าง

   ใช้งานได้กับ IE11 + และเบราว์เซอร์สมัยใหม่อื่น ๆ

2. สร้างองค์ประกอบอินพุตไฟล์ใหม่และแทนที่องค์ประกอบเก่า

   ข้อเสียคือคุณจะสูญเสียผู้ฟังเหตุการณ์และคุณสมบัติ expando

3. รีเซ็ตแบบฟอร์มเจ้าของด้วยวิธีการ form.reset ()

   เพื่อหลีกเลี่ยงผลกระทบต่อองค์ประกอบการป้อนข้อมูลอื่น ๆ ในรูปแบบของเจ้าของเดียวกันเราสามารถสร้างรูปแบบใหม่ที่ว่างเปล่าและผนวกองค์ประกอบอินพุตไฟล์ในรูปแบบใหม่นี้และตั้งค่าใหม่ วิธีนี้ใช้ได้กับเบราว์เซอร์ทั้งหมด

ฉันเขียนฟังก์ชั่นจาวาสคริปต์ ตัวอย่าง: 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 : สำหรับเบราว์เซอร์สมัยใหม่ให้ใช้

input.value = '';

คำตอบเก่า:

เกี่ยวกับ:

input.type = "text";
input.type = "file";

ฉันยังต้องเข้าใจว่าทำไมสิ่งนี้จึงไม่สามารถทำงานกับwebkitได้

อย่างไรก็ตามมันใช้ได้กับ IE9>, Firefox และ Opera
สถานการณ์กับ webkit คือฉันดูเหมือนจะไม่สามารถเปลี่ยนกลับเป็นไฟล์ได้
ด้วย IE8 สถานการณ์คือมีข้อผิดพลาดด้านความปลอดภัย

แก้ไข: สำหรับ webkit, Opera และ firefox สิ่งนี้ใช้ได้ แต่:

input.value = '';

(ตรวจสอบคำตอบข้างต้นพร้อมข้อเสนอนี้)

ฉันจะดูว่าฉันสามารถหาวิธีที่ดีกว่าในการทำ cross-browser นี้โดยไม่ต้องใช้ GC หรือไม่

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

ทำงานได้กับเบราว์เซอร์ส่วนใหญ่ ไม่ทำงานกับ IE <9 นั่นคือทั้งหมด
ทดสอบกับ firefox 20, chrome 24, opera 12, IE7, IE8, IE9 และ IE10

การตั้งค่าเป็น''ไม่สามารถใช้ได้กับทุกเบราว์เซอร์

ให้ลองตั้งค่าเป็นnullดังนี้:

document.getElementById('your_input_id').value= null;

แก้ไข: ฉันได้รับเหตุผลด้านความปลอดภัยที่ถูกต้องมากที่ไม่อนุญาตให้ JS ตั้งค่าอินพุตไฟล์ แต่มันก็ดูสมเหตุสมผลที่จะให้กลไกง่าย ๆ สำหรับการเคลียร์เอาต์พุตที่เลือกไว้แล้ว ฉันพยายามใช้สตริงที่ว่างเปล่า แต่มันไม่ได้ทำงานในเบราว์เซอร์ทั้งหมดNULLทำงานในทุกเบราว์เซอร์ที่ฉันลอง (Opera, Chrome, FF, IE11 + และ Safari)

แก้ไข: โปรดทราบว่าการตั้งค่าให้NULLทำงานบนเบราว์เซอร์ทั้งหมดในขณะที่การตั้งค่าเป็นสตริงว่างไม่ได้

น่าเสียดายที่ไม่มีคำตอบข้างต้นปรากฏขึ้นเพื่อครอบคลุมฐานทั้งหมด - อย่างน้อยก็ไม่ได้มาจากการทดสอบของฉันกับจาวาสคริปต์วานิลลา

• .value = nullดูเหมือนว่าจะทำงานบน FireFox, Chome, Opera และ IE11 (แต่ไม่ใช่ IE8 / 9/10 )

• .cloneNode(และ.clone()ใน jQuery) บน FireFox ปรากฏขึ้นเพื่อคัดลอก.valueโอเวอร์ดังนั้นจึงทำให้โคลนไม่มีจุดหมาย

ดังนั้นนี่คือฟังก์ชั่นวานิลลาจาวาสคริปต์ที่ฉันเขียนที่ทำงานบน FireFox (27 และ 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... เหล่านี้เป็นเบราว์เซอร์เท่านั้นที่มีอยู่ในปัจจุบัน ให้ฉันทดสอบด้วย

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrlพารามิเตอร์แฟ้มใส่ตัวเองเพื่อให้ฟังก์ชั่นจะถูกเรียกว่าเป็น ...

clearFileInput(document.getElementById("myFileInput"));

สารละลาย

รหัสต่อไปนี้ทำงานให้ฉันด้วย jQuery มันทำงานได้ในทุกเบราว์เซอร์และช่วยให้รักษาเหตุการณ์และคุณสมบัติที่กำหนดเอง

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

การสาธิต

ดูjsFiddle นี้สำหรับรหัสและการสาธิต

ลิ้งค์

• การล้าง <input type = 'file' /> โดยใช้ jQuery

• วิธีรีเซ็ตไฟล์อินพุตด้วย JavaScript

คุณต้องการแทนที่ด้วยอินพุตไฟล์ใหม่ นี่คือวิธีที่สามารถทำได้ด้วย jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

และใช้บรรทัดนี้เมื่อคุณต้องการล้างฟิลด์อินพุต (ในบางเหตุการณ์):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

แก้ไข: อัน
นี้ใช้งานไม่ได้ใน IE และ Opera แต่ดูเหมือนว่าจะใช้งานได้กับ firefox, safari และ chrome

ฉันมีปัญหาเดียวกันและฉันมากับสิ่งนี้

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>

ที่จริงแล้วค่อนข้างง่าย

document.querySelector('#input-field').value = '';

ฉันกำลังมองหาวิธีที่ง่ายและสะอาดในการล้างอินพุตไฟล์ HTML คำตอบข้างต้นนั้นยอดเยี่ยม แต่ไม่มีคำตอบใดที่ฉันกำลังมองหาจนกระทั่งฉันเข้ามาในเว็บด้วยวิธีที่ง่ายและสง่างามในการทำ:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

เครดิตทั้งหมดไปที่คริส 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>

คำตอบข้างต้นนำเสนอโซลูชั่นที่ค่อนข้างงุ่มง่ามด้วยเหตุผลดังต่อไปนี้:

1. ฉันไม่ชอบที่จะได้wrapรับinputก่อนแล้วจึงได้รับ html มันมีส่วนเกี่ยวข้องและสกปรก

2. Cross browser JS นั้นมีประโยชน์และดูเหมือนว่าในกรณีนี้มีคนที่ไม่รู้จักจำนวนมากเกินกว่าที่จะใช้การtypeสับเปลี่ยน (ซึ่งอีกครั้งสกปรกเล็กน้อย) และการตั้งค่าvalueเป็น''

ดังนั้นฉันจึงเสนอวิธีแก้ปัญหาแบบ jQuery ให้กับคุณ:

$('#myinput').replaceWith($('#myinput').clone())

มันทำสิ่งที่มันบอกว่ามันจะแทนที่อินพุตด้วยโคลนของตัวเอง โคลนจะไม่ได้เลือกไฟล์

ข้อดี:

1. รหัสง่ายและเข้าใจได้
2. ไม่มีการห่อตัวหรือการสลับประเภทที่เงอะงะ
3. ข้ามความเข้ากันได้ของเบราว์เซอร์ (แก้ไขฉันถ้าฉันผิดที่นี่)

ผลลัพธ์: โปรแกรมเมอร์มีความสุข

นี่คือสองเซ็นต์ของฉันไฟล์อินพุตจะถูกเก็บไว้เป็นอาร์เรย์ดังนั้นนี่คือวิธีการ null

document.getElementById('selector').value = []

ส่งคืนอาร์เรย์ว่างเปล่าและทำงานกับเบราว์เซอร์ทั้งหมด

สิ่งที่ช่วยฉันได้คือฉันพยายามดึงและอัปโหลดไฟล์ที่เลือกล่าสุดโดยใช้ลูปแทนการล้างคิวและใช้งานได้ นี่คือรหัส

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

หวังว่านี่จะช่วยได้บ้าง

ฉันพยายามแก้ปัญหาส่วนใหญ่ แต่ดูเหมือนจะไม่ทำงาน อย่างไรก็ตามฉันพบว่ามันต้องเดินไปรอบ ๆ

โครงสร้างของรูปแบบคือ: form=> label, และinput submit buttonหลังจากที่เราเลือกไฟล์แล้วชื่อไฟล์จะแสดงโดยป้ายกำกับโดยทำด้วยตนเองใน JavaScript

ดังนั้นกลยุทธ์ของฉันคือตอนแรกการส่งbuttonถูกปิดใช้งานหลังจากเลือกไฟล์แล้วdisabledแอตทริบิวต์ปุ่มส่งจะถูกลบออกเพื่อให้ฉันสามารถส่งไฟล์ได้ หลังจากฉันส่งฉันล้างสิ่งlabelที่ทำให้ดูเหมือนว่าฉันล้างไฟล์inputแต่ไม่จริง จากนั้นฉันจะปิดการใช้งานปุ่มส่งอีกครั้งเพื่อป้องกันไม่ให้ส่งแบบฟอร์ม

เมื่อตั้งค่าการส่งbutton disableหรือไม่ฉันจะหยุดการส่งไฟล์หลายครั้งเว้นแต่ว่าฉันจะเลือกไฟล์อื่น

ฉันเปลี่ยนเป็นพิมพ์ข้อความและกลับไปพิมพ์เป็นไฟล์โดยใช้ setAttribute

'<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");
}