Nhấn 'Hủy' trong khi tải lên tệp trong Chrome sẽ xóa giá trị

Question

Tôi đang làm việc với đầu vào html loại = "tệp" đơn giản và tôi đang gặp sự cố trong Chrome. Cụ thể, khi bạn duyệt đến và chọn một tệp, nó sẽ lưu giá trị. Tuy nhiên, nếu bạn duyệt lại, sau đó nhấn hủy nó sẽ xóa giá trị.

Các html rất đơn giản:

<input type="file"> 

Đây là một đơn giản fiddle- http://jsfiddle.net/78ghn/.

Điều này không xảy ra trong các trình duyệt khác - có cách nào để buộc Chrome giữ lại giá trị không ??

Answer 1

function f() 
 
{ 
 
    document.getElementById("b").appendChild(document.getElementById("a")); 
 
    document.getElementById("d").innerHTML = document.getElementById("c").innerHTML 
 
    document.getElementById("alert").innerHTML = 'Your last file was '.concat(document.getElementById("b").lastChild.value.slice(12)) 
 
} 
 
function g() 
 
{ 
 
    if(document.getElementById("b").lastChild.value) 
 
    { 
 
    \t document.write("You have submitted ".concat(document.getElementById("b").lastChild.value.slice(12))); 
 
    } 
 
    else 
 
    { 
 
    \t document.write("You have submitted nothing."); 
 
    } 
 
}

#a 
 
{ 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#c 
 
{ 
 
    display: none; 
 
} 
 
#d 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#e 
 
{ 
 
    background-color: green; 
 
    border: 2px solid black; 
 
    color: white; 
 
    font-size: 16pt; 
 
    width: 180px; 
 
    height: 90px; 
 
} 
 
#f 
 
{ 
 
    position: relative; 
 
    left: 25%; 
 
    bottom: 70%; 
 
}

<form> 
 
    <div id='e'> 
 
    <span id='d'> 
 
     <input type="file" onchange='f();' id='a'> 
 
    </span> 
 
    <span id='f'>Select File</span> 
 
    </div> 
 
    <input type='button' value='Submit' onclick='g();'> 
 
</form> 
 
<span id='alert'>You have chosen no files.</span> 
 
<ul id='b'> 
 
</ul> 
 
<form id='c'> 
 
    <input type="file" onchange='f();' id='a'> 
 
</form>

tôi đã không thể tìm thấy một thi bản địa cho điều này, vì vậy tôi cố gắng workaround của riêng tôi. Nó lấy đầu vào từ lớp phủ nút CSS tùy chỉnh, sau đó thêm phần tử input thực vào danh sách và thay thế nó bằng một phần tử trống. Giá trị được đọc và hiển thị, vì nó sẽ có giá trị bình thường là input. Nó không được bao gồm, nhưng gửi nó sẽ liên quan đến việc di chuyển bản gốc input (phần tử cuối cùng của ul với id='b') đến một số form và gửi nó qua JavaScript. Nó không phải là tối ưu, nhưng nó hoạt động.