Не удалось вызвать событие click для поля ввода файла, используя Jquery [duplicate]

Что вы можете сделать по этому поводу?

Здесь есть много хороших ответов, объясняющих, что такое пустая ссылка и как ее отладить. Но очень мало о том, как предотвратить проблему или, по крайней мере, сделать ее легче поймать.

Проверить аргументы

Например, методы могут проверять разные аргументы, чтобы увидеть, null и выбросить ArgumentNullException, исключение, явно созданное для этой конкретной цели.

Конструктор для ArgumentNullException даже принимает имя параметра и сообщение как аргументы, чтобы вы могли точно сказать разработчику, что проблема.

public void DoSomething(MyObject obj) {
    if(obj == null) 
    {
        throw new ArgumentNullException("obj", "Need a reference to obj.");
    }
}

Использовать инструменты

Есть также несколько библиотек, которые могут помочь. Например, «Resharper» может предоставить вам предупреждения во время написания кода, особенно если вы используете их атрибут: NotNullAttribute

В разделе «Контракты кода Microsoft» вы используете синтаксис, например Contract.Requires(obj != null), который дает вам проверку выполнения и компиляцию: Представление кодовых контрактов .

Существует также «PostSharp», который позволит вам просто использовать такие атрибуты:

public void DoSometing([NotNull] obj)

Сделав это и сделав PostSharp частью вашего процесса сборки, obj будет проверяться на нуль во время выполнения. См. Ошибка проверки PostSharp

Решение для простого кода

Или вы всегда можете использовать свой собственный подход, используя простой старый код. Например, вот структура, которую вы можете использовать, чтобы поймать нулевые ссылки. Он моделируется после той же концепции, что и Nullable:

[System.Diagnostics.DebuggerNonUserCode]
public struct NotNull where T: class
{
    private T _value;

    public T Value
    {
        get
        {
            if (_value == null)
            {
                throw new Exception("null value not allowed");
            }

            return _value;
        }
        set
        {
            if (value == null)
            {
                throw new Exception("null value not allowed.");
            }

            _value = value;
        }
    }

    public static implicit operator T(NotNull notNullValue)
    {
        return notNullValue.Value;
    }

    public static implicit operator NotNull(T value)
    {
        return new NotNull { Value = value };
    }
}

. Вы использовали бы очень похоже на то, как вы бы использовали Nullable, за исключением того, что цель заключалась в том, чтобы сделать абсолютно противоположное - не разрешать null. Вот несколько примеров:

NotNull person = null; // throws exception
NotNull person = new Person(); // OK
NotNull person = GetPerson(); // throws exception if GetPerson() returns null

NotNull неявно отбрасывается в и из T, поэтому вы можете использовать его в любом месте, где это необходимо. Например, вы можете передать объект Person методу, который принимает значение NotNull:

Person person = new Person { Name = "John" };
WriteName(person);

public static void WriteName(NotNull person)
{
    Console.WriteLine(person.Value.Name);
}

Как вы можете видеть выше, как с помощью nullable, вы получите доступ к базовому значению через Value имущество. Кроме того, вы можете использовать явный или неявный листинг, вы можете увидеть пример с возвращаемым значением ниже:

Person person = GetPerson();

public static NotNull GetPerson()
{
    return new Person { Name = "John" };
}

Или вы даже можете использовать его, когда метод просто возвращает T (в этом случае Person), выполнив бросок. Например, следующий код будет похож на код выше:

Person person = (NotNull)GetPerson();

public static Person GetPerson()
{
    return new Person { Name = "John" };
}

Объединить с Extension

Объединить NotNull с методом расширения, и вы можете охватить еще больше ситуаций. Вот пример того, как может выглядеть метод расширения:

[System.Diagnostics.DebuggerNonUserCode]
public static class NotNullExtension
{
    public static T NotNull(this T @this) where T: class
    {
        if (@this == null)
        {
            throw new Exception("null value not allowed");
        }

        return @this;
    }
}

И вот пример того, как он может быть использован:

var person = GetPerson().NotNull();

GitHub

Для вашей справки я сделал код выше, доступный на GitHub, вы можете найти его по адресу:

https://github.com/luisperezphd/NotNull

Функция родственного языка

В C # 6.0 был введен «оператор с нулевым условием», который немного помогает в этом. С помощью этой функции вы можете ссылаться на вложенные объекты, и если какой-либо из них null, все выражение возвращает null.

Это уменьшает количество нулевых проверок, которые вы должны выполнять в некоторых случаях. Синтаксис заключается в том, чтобы поставить вопросительный знак перед каждой точкой. Возьмите следующий код, например:

var address = country?.State?.County?.City;

Представьте, что country является объектом типа Country, который имеет свойство, называемое State и т. Д. Если country, State, County или City - null, то address will be null . Therefore you only have to check whether адрес is null`.

Это отличная функция, но она дает вам меньше информации. Это не делает очевидным, какой из 4 является нулевым.

Встроенный как Nullable?

C # имеет красивую стенографию для Nullable, вы можете сделать что-то нулевое помещая знак вопроса после такого типа int?.

Было бы неплохо, если бы у C # было что-то вроде структуры NotNull выше и имела аналогичную стенографию, может быть, восклицательный знак (!), чтобы вы могли написать что-то вроде: public void WriteName(Person! person).

72
задан tamakisquare 21 December 2011 в 21:44
поделиться

12 ответов

Если вы хотите иметь свою собственную кнопку для загрузки файла вместо использования <input type="file" />, вы можете сделать что-то вроде:

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

Обратите внимание, что я использовал visibility: hidden вместо display: none. Вы не можете вызывать событие клика на не отображаемом входе файла.

113
ответ дан thiagowfx 23 August 2018 в 16:05
поделиться

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

1
ответ дан Alex Turpin 23 August 2018 в 16:05
поделиться

Натурально единственный способ - создать элемент <input type="file">, а затем имитировать щелчок, к сожалению.

Там крошечный плагин (бесстыдный плагин), который избавит вас от необходимости делать все это время: файл-диалог

fileDialog()
    .then(file => {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

        // Post to server
        fetch('/uploadImage', {
            method: 'POST',
            body: data
        })
    })
2
ответ дан Alister Norris 23 August 2018 в 16:05
поделиться

Я не уверен, как браузеры обрабатывают клики по элементам type="file" (проблемы безопасности и все), но это должно работать:

$('input[type="file"]').click();

Я протестировал этот JSFiddle в Chrome, Firefox и Opera, и все они показывают диалог просмотра файлов.

12
ответ дан Bojangles 23 August 2018 в 16:05
поделиться

В большинстве ответов отсутствует полезная информация:

Да, вы можете программным образом щелкнуть элемент ввода с помощью jQuery / JavaScript, но только если вы сделаете это в обработчике событий, принадлежащем событию, которое НАЧАЛОСЬ ПОЛЬЗОВАТЕЛЕМ!

Итак, например, ничего не произойдет, если вы, сценарий, программно нажмите кнопку в обратном вызове ajax, но если вы поместите ту же строку кода в обработчик события, который был поднят пользователь будет работать.

PS Ключевое слово debugger; нарушает окно просмотра, если оно находится перед программным щелчком ... по крайней мере, в хроме 33 ...

88
ответ дан Chris Happy 23 August 2018 в 16:05
поделиться

Лучшее решение работает во всех браузерах .. даже на мобильных устройствах.

<div class="btn" id="s_photo">Upload</div>

<input type="file" name="s_file" id="s_file" style="opacity: 0;">';

<!--jquery-->

<script>
    $("#s_photo").click(function() {
        $("#s_file").trigger("click");
    });
</script>

Скрытие типа входного файла вызывает проблемы с браузерами, непрозрачность - лучшее решение, потому что оно не скрывается, просто не отображается. :)

2
ответ дан hev1 23 August 2018 в 16:05
поделиться

Убедитесь, что вы используете привязку, чтобы получить компонентные реквизиты в REACT

class FileUploader extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
   onChange=(e,props)=>{
    const files = e.target.files;
    const selectedFile = files[0];
    ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
  }
   handleClick = () => {
    this.refs.fileUploader.click();
  }
  render()
  {
  return(
      <div>
        <button type="button" onClick={this.handleClick}>Select File</button>  
        <input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
      </div>)
  }
}
0
ответ дан m-farhan 23 August 2018 в 16:05
поделиться

Только для записи есть альтернативное решение, которое не требует javascript.

Вам нужен <label> с соответствующим атрибутом for (указывает на ввод) , optionnaly, как кнопка (с бутстрапом, используйте btn btn-default). Когда пользователь нажимает на метку, открывается диалоговое окно, например:

<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
  Click me
</label>
<input type="file" id="exampleInput" style="display: none" />

53
ответ дан m_x 23 August 2018 в 16:05
поделиться

Используя jQuery, вы можете вызвать click() , чтобы имитировать щелчок.

1
ответ дан pdubs 23 August 2018 в 16:05
поделиться

Я обертываю input[type=file] в теге метки, а затем стилю label по вашему вкусу и скрываю input.

<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
    <input type="file">
    <span><i class="fa fa-upload"></i></span>
</label>

<style>
    .fileLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
</style>

Чисто CSS-решение.

2
ответ дан Ponyboy 23 August 2018 в 16:05
поделиться

Это сработало для меня:

$('#fileInput').val('');
0
ответ дан Undo 23 August 2018 в 16:05
поделиться

Для тех, кто хочет того же, но использует React

openFileInput = () => {
    this.fileInput.click()
}

<a href="#" onClick={this.openFileInput}>
    <p>Carregue sua foto de perfil</p>
    <img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>
0
ответ дан Vinicius Lima 23 August 2018 в 16:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: