Потому что, когда вы ловите исключение, вы должны правильно его обрабатывать. И вы не можете ожидать обработки всех видов исключений в вашем коде. Кроме того, если вы поймаете все исключения, вы можете получить исключение, которое не может справиться и предотвратить код, который является верхним в стеке, чтобы правильно его обрабатывать.
Основной принцип состоит в том, чтобы поймать наиболее специфический тип, который вы можете.
Это связано с ограничением безопасности.
Я узнал, что ограничение безопасности происходит только тогда, когда для параметра <input type="file"/>
установлено значение display:none;
или visbilty:hidden
.
Поэтому я попытался позиционировать его вне видового экрана, установив position:absolute
и top:-100px;
и voilà.
см. http://jsfiddle.net/DSARd/1/
называют это хаком.
Надеюсь, что это сработает для вас.
У меня были проблемы с пользовательской проверкой на стороне клиента для <input type="file"/>
при использовании поддельной кнопки для ее запуска, и для меня работало решение @Guillaume Bodi (также с opacity: 0;
на chrome)
$("#MyForm").on("click", "#fake-button", function () {
$("#uploadInput").focus().trigger("click");
});
и стиль css для ввода ввода
#uploadInput {
opacity: 0.0;
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}
Проверьте мою скрипту.
http://jsfiddle.net/mohany2712/vaw8k/
.uploadFile {
visibility: hidden;
}
#uploadIcon {
cursor: pointer;
}
<body>
<div class="uploadBox">
<label for="uploadFile" id="uploadIcon">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png" width="20px" height="20px"/>
</label>
<input type="file" value="upload" id="uploadFile" class="uploadFile" />
</div>
</body>
Правильный код:
<style>
.upload input[type='file']{
position: absolute;
float: left;
opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
filter: alpha(opacity=0);
width: 100px; height: 30px; z-index: 51
}
.upload input[type='button']{
width: 100px;
height: 30px;
z-index: 50;
}
.upload input[type='submit']{
display: none;
}
.upload{
width: 100px; height: 30px
}
</style>
<div class="upload">
<input type='file' ID="flArquivo" onchange="upload();" />
<input type="button" value="Selecionar" onchange="open();" />
<input type='submit' ID="btnEnviarImagem" />
</div>
<script type="text/javascript">
function open() {
$('#flArquivo').click();
}
function upload() {
$('#btnEnviarImagem').click();
}
</script>
Это специально и по дизайну. Это проблема безопасности.
Моя проблема была немного иной в iOS 7. Оказывается, FastClick вызывал проблемы. Все, что мне нужно было сделать, это добавить class="needsclick"
к моей кнопке.
Это, вероятно, лучший ответ, учитывая проблемы с перекрестным браузером.
CSS:
#file {
opacity: 0;
width: 1px;
height: 1px;
}
JS:
$(".file-upload").on('click',function(){
$("[name='file']").click();
});
HTML :
<a class="file-upload">Upload</a>
<input type="file" name="file">
Просто ради любопытства вы можете сделать что угодно, как хотите, динамически создавая форму загрузки и входной файл, не добавляя его в дерево DOM:
$('.your-button').on('click', function() {
var uploadForm = document.createElement('form');
var fileInput = uploadForm.appendChild(document.createElement('input'));
fileInput.type = 'file';
fileInput.name = 'images';
fileInput.multiple = true;
fileInput.click();
});
Не нужно добавлять uploadForm в DOM.
Вы можете использовать элемент LABEL ex.
<div>
<label for="browse">Click Me</label>
<input type="file" id="browse" name="browse" style="display: none">//
</div>
Это вызовет входной файл
Слишком поздно ответить, но я думаю, что эта минимальная настройка работает лучше всего. Я также ищу то же самое.
<div class="btn-file">
<input type="file" class="hidden-input">
Select your new picture
</div>
// css
.btn-file {
display: inline-block;
padding: 8px 12px;
cursor: pointer;
background: #89f;
color: #345;
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
filter: alpha(opacity=0);
opacity: 0;
cursor: inherit;
display: block;
}
или просто
$(':input[type="file"]').show().click().hide();
adardesign прибивает его к тому, что элемент ввода файла игнорируется, когда он скрыт. Я также заметил, что многие люди меняют размер элемента на 0 или вытесняют его за пределы с настройками позиционирования и переполнения. Все это отличные идеи. Альтернативный способ, который также отлично работает, - просто установить непрозрачность на 0. Затем вы всегда можете просто установить позицию, чтобы она не смещала другие элементы, как это делает скрытие. Кажется немного ненужным сдвинуть элемент почти на 10K пикселей в любом направлении.
Вот небольшой пример для тех, кто хочет его:
input[type='file']{
position:absolute;
opacity:0;
/* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* For IE5 - 7 */
filter: alpha(opacity=0);
}
На самом деле, я нашел для этого очень простой способ:
$('#fileinput').show().trigger('click').hide();
Таким образом, поле ввода файла может иметь свойство css в none и все равно выиграть сделку:)
это сработало для меня:
JS:
$('#fileinput').trigger('click');
HTML:
<div class="hiddenfile">
<input name="upload" type="file" id="fileinput"/>
</div>
CSS:
.hiddenfile {
width: 0px;
height: 0px;
overflow: hidden;
}
>>> Еще один, который работает с Cross-Browser: & lt; & lt;
Идея заключается в том, что вы накладываете невидимую огромную кнопку «Обзор» над вашей пользовательской кнопкой. Поэтому, когда пользователь нажимает на вашу пользовательскую кнопку, он на самом деле нажимает кнопку «Обзор» собственного поля ввода.
JS Fiddle: http://jsfiddle.net/5Rh7b/
HTML:
<div id="mybutton">
<input type="file" id="myfile" name="upload"/>
Click Me!
</div>
CSS:
div#mybutton {
/* IMPORTANT STUFF */
overflow: hidden;
position: relative;
/* SOME STYLING */
width: 50px;
height: 28px;
border: 1px solid green;
font-weight: bold
background: red;
}
div#mybutton:hover {
background: green;
}
input#myfile {
height: 30px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
font-size: 100px;
z-index: 2;
opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}
JavaScript:
$(document).ready(function() {
$('#myfile').change(function(evt) {
alert($(this).val());
});
});
Основываясь на ответе Гийома Боди, я сделал это:
$('.fileinputbar-button').on('click', function() {
$('article.project_files > header, article.upload').show();
$('article.project_files > header, article.upload header').addClass('active');
$('.file_content, article.upload .content').show();
$('.fileinput-button input').focus().click();
$('.fileinput-button').hide();
});
, что означает, что он скрыт, чтобы начать с него, а затем отобразиться для триггера, а затем снова спрятать.
У меня есть работа (= проверена) в IE8 +, последние FF и хром:
$('#uploadInput').focus().trigger('click');
Ключ фокусируется перед стрельбой щелчком (иначе хром игнорирует его).
Примечание: вам НЕОБХОДИМО видеть, что ваш вход отображается и отображается (как в, а не display:none
, а не visibility:hidden
). Я предлагаю (как и многие другие раньше) полностью позиционировать вход и выкидывать его с экрана.
#uploadInput {
position: absolute;
left: -9999px;
}
Это очень старый вопрос, но, к сожалению, эта проблема по-прежнему актуальна и требует решения.
Решение (удивительно простое), которое я придумал, это «скрыть» фактический ввод файла поле и оберните его тегом LABEL (может быть основан на Bootstrap и HTML5 для улучшения).
See here:
Пример кода здесь
Этот способ , реальное поле ввода файла невидимо, и все, что вы видите, это настраиваемая кнопка, которая на самом деле является измененным элементом LABEL. Когда вы нажимаете на этот элемент LABEL, открывается окно выбора файла, и выбранный вами файл переходит в поле ввода реального файла.
Кроме того, вы можете манипулировать внешним видом и поведением как вы хотите (например: получить имя выбранного файла из файла ввода файла после его выбора и показать его где-то. Элемент LABEL не делает это автоматически, конечно. Обычно я просто помещаю его в LABEL, так как его текстовое содержимое).
Остерегайтесь! Манипуляция взглядом и поведением этого ограничивается тем, что вы можете себе представить и думать. & Nbsp; & nbsp; & nbsp; ; -) & NBSP; ; -)
Попробуйте это, это взломать. Позиция: абсолютная для Chrome и триггер ('change') для IE.
var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);
$('#aPhotoUpload').click(function () {
hiddenFile.trigger('click');
if ($.browser.msie)
hiddenFile.trigger('change');
});
hiddenFile.change(function (e) {
alert('TODO');
});
Мне удалось с помощью простого $ (...). click (); с JQuery 1.6.1