Javascript не очищающий ящик в IE

Question

Internet Explorer, проклятие моей жизни разработки, отказываясь снова делать то, что другие браузеры, похоже, делают без усилий. Я пытаюсь очистить код/​​значение для просмотра, если пользователь выбирает тип файла, который не разрешен. Работает в FF, но не IE 9. Спасибо

<script type="text/javascript"> 
<!-- 
    extArray = new Array(".jpg", ".png"); 
    function LimitAttach(form, file) { 
     allowSubmit = false; 
     if (!file) return; 
     while (file.indexOf("\\") != -1) 
      file = file.slice(file.indexOf("\\") + 1); 
      ext = file.slice(file.indexOf(".")).toLowerCase(); 
     for (var i = 0; i < extArray.length; i++) { 
      if (extArray[i] == ext) { 
       allowSubmit = true; 
       break; 
      } 
     } 
     if (allowSubmit) { 
      return true; 
     } else { 
      alert("Please only upload files that end in types: " 
      + (extArray.join(" ")) + "\nPlease select a new " 
      + "file to upload and submit again."); 
      document.getElementById('photobrowser').value = ""; 
      return false; 
     } 
    } 
--> 
</script> 


    <form action="process.php" method="POST" enctype="multipart/form-data" name="formUpload"> 
     <label>Picture:</label> 
     <input type="file" name="photo" id="photobrowser" onchange="return LimitAttach(formUpload, formUpload.photo.value)" tabindex="4"> 
     <input type="hidden" name="subphoto" value="<?php echo $newCount ?>" /> 
     <input type="image" src="styling/images/button-add-photo.png" id="subBtn" tabindex="6" /> 
    </form 

Answer 1

Браузеры сильно отличаются от своих ограничений файловыми входами. Входы файлов позволяют пользователю взаимодействовать и выбирать файлы в своей файловой системе. Таким образом, все браузеры запрещают JS автоматически выбирать файлы. IE идет дальше, чтобы запретить изменение выбора ввода вообще, даже до пустой строки. Это действительно имеет смысл, поскольку, если вы не разрешаете выбор данного файла, почему вам разрешено вообще его изменять?

И, вместо проверки его в JS, вы должны проверять файлы на бэкэнд. Проверка на совместимость с интерфейсом хорошо для удобства использования, но даже когда она установлена, всегда должна быть проверка подлинности. Пользователи могут просто отключить JS, использовать что-то вроде firebug, чтобы изменить его или даже (иногда) загрузить файл на свой локальный компьютер, изменить его, а затем использовать для отправки на ваш сайт.

Answer 2

Вы пробовали прохождения this в метод JS, вместо того чтобы найти его идентификатору ?:

onchange="return LimitAttach(this, this.value);" 

JavaScript:

function LimitAttach(input, file) { 
    allowSubmit = false; 
    if (!file) return; 
    while (file.indexOf("\\") != -1) 
     file = file.slice(file.indexOf("\\") + 1); 
     ext = file.slice(file.indexOf(".")).toLowerCase(); 
    for (var i = 0; i < extArray.length; i++) { 
     if (extArray[i] == ext) { 
      allowSubmit = true; 
      break; 
     } 
    } 
    if (allowSubmit) { 
     return true; 
    } else { 
     alert("Please only upload files that end in types: " 
     + (extArray.join(" ")) + "\nPlease select a new " 
     + "file to upload and submit again."); 
     input.value = ""; 
     return false; 
    } 
} 

EDIT

Это своего рода a hack, но вы можете сделать снимок:

function checkImg(val){ 
    var dgr = val.value; 
    dgr = dgr.substr(dgr.length-4, dgr.length) 
    dgr = dgr.toLowerCase(); 
    if (dgr =='.jpg' || dgr == 'jpeg' || dgr== '.gif'){ 
    alert('image'); 
    }else{ 
    alert('not image'); 
    var objD = document.forms['form1'].divR; 
    objD.innerHTML = ''; 
    objD.innerHTML = '<input id="uImg" name="uImg" type="file" class="defText" style="font-size: 10pt" onchange="javascript: checkImg(this);" size="30">'; 
    } 
} 

<form name="form1" id="form1" method="post"> 
    <div id="divR" name="divR"> 
    <input id="uImg" name="uImg" type="file" class="defText" style="font-size: 10pt" onchange="javascript: checkImg(this);" size="30"> 
    </div> 
</form>