Повеќе пати низ форуми имам забележано слични прашања, па си реков да одвојам малку време и да напишам краток блог пост со начин на решавање на проблемот. Првично ќе помислите дека, да, едноставно е да се избрише вредноста на File Upload контролата, но сепак, не е така едноставно посебно кога е во прашање Internet Explorer, кој поради безбедносни причини, не дозволува многу “играње” со ваков тип на контроли (што е прилично логично). Некој може да праша “Зашто да не дозволува и кои се потенцијалните безбедносни закани?”. Па, замислете некој избира фајл за upload со име MyFile.txt и вие преку вашиот код или скрипта, наместо тој фајл, му правите измена во Passwords.txt. И во случај да има таков фајл, вие го качувате тој фајл на вашиот сервер? Па, ова е потенцијално прилично голема безбедносна маана.
Оттука, не само манипулација со вредноста на File / FileUpload контролата, туку воопшто и неможе туку така да се избрише вредноста на самата контрола.
Ајде да направиме еден мал експеримент.
Најпрвин, додадете го следниов HTML код во вашиот вебсајт:
<input type="file" id="upload1" />
или пак ASPX контрола (во суштина е исто, бидејќи е исти резултатот генериран во HTML)
<asp:FileUpload ID="fileUpload1" runat="server" />
Сега, да речеме дека сме избрале нешто преку Browse копчето, но сакаме да имаме и копче со помош на коешто ќе ја избришеме вредноста од контролата без да мора да го правиме тоа рачно…
Да дефинираме копче со таква функционалност:
<input type="button" id="btnClear" value="Clear" />
Може да додадеме едноставна JavaScript или jQuery скрипта (ако користите jQuery библиотека) за бришењето да функционира.
Скрипта
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnClear").click(function (event) { event.preventDefault(); $("#upload1").val(''); }); }); </script>
Скриптата е едноставна. Се што прави е бришење на вредноста од HTML елементот со ID upload1. Тоа е нашата конрола за селектирање на фајлови за качување (upload).
Ако ја тестираме оваа скрипта на различни прелистувачи, ќе забележите дека на Mozilla Firefox, Google Chrome работи, додека на Internet Explorer нема да работи.
Ако сакате да се осигурате дека вредноста е таму и постои, и дека можете да ја пристапите преку val() jQuery функцијата, слободно тестирајте на следниов начин:
var result = $("#upload1").val(); alert(result);
Оттука, за да го изведеме ова да работи без проблем на било кој прелистувач, можеме да го направиме тоа со следниов трик:
JQUERY 1. Најпрвин ќе дефинираме една функција со чија помош ќе можеме да ја избришеме и замениме HTML содржината на даден елемент (по ID) со содржината на истиот елемент. На пример, имаме DIV елемент и сакаме да ја замеинме содржината на тој DIV со неговата содржина… Што ќе смени? Тоа што нам ни треба, контролата нема да има вредност при замена на содржината.
function clear_html(id) { $('#' + id).html($('#' + id).html()); }
Како што гледате, функцијата прима ID, потоа го наоѓа тој елемент со помош на jQuery селектор и го заменува HTML-то на елементот со неговото HTML. Уште еднаш која е поентата? Ако на пример отворите Firebug во Mozilla Firefox (или било која друга девелоперска алатка за JS) ќе забележите дека и покрај тоа што ние имаме избрано нешто во File/FileUpload контролата, сепак на клиентска страна ништо не е сменето, значи заменувањето би значело и автоматско бришење на вредноста.
2. Оттука, се што треба да направиме е да ја врапираме File/FileUpload контролата во даден DIV или SPAN, и на копчето за бришење да ја повикаме clear_html функцијата со параметар ID-то на DIV-от или SPAN-от.
<div id="divUpload"> <input type="file" id="upload1" /> <input type="button" id="btnClear" value="Clear" onclick="clear_html('divUpload')" /> </div>
Комплетниот код со jQuery е:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> function clear_html(id) { $('#' + id).html($('#' + id).html()); } </script> <head> <body> <div id="divUpload"> <input type="file" id="upload1" /> <input type="button" value="Clear" onclick="clear_html('divUpload')" /> </div> </body> </html>
Доколку го испробате овој код, ќе видите дека функционира без проблем и на Internet Explorer.
JAVASCRIPT
Ако пак не користите jQuery, тогаш алтернативно решение на овој код со чист JavaScript би било следново:
<html> <head> <script type="text/javascript"> function clear_html(id) { var element = document.getElementById(id); element.innerHTML = element.innerHTML; } </script> <head> <body> <div id="myDiv1"> <input type="file" id="upload1" /> <input type="button" value="Clear" onclick="clear_html('myDiv1')" /> </div> </body> </html>
Ако забележувате, тука повторно го заменуваме HTML-от на дадениот елемент со користење на innerHTML.
Ова е интересен проблем и добро е да си го имаме документирано тука ;).
Се надевам блогот ви беше од корист.
Хајан
Верзија од овој блог на Англиски: http://www.codeasp.net/blogs/hajan/microsoft-net/1651/tips-and-tricks-how-to-clear-the-file-upload-control-value-using-jquery-javascript