Question

Tigran Saluev建议following answer手动触发选择文件的提示，但代码使用jQuery。他的代码如下：

var input = $(document.createElement("input"));
input.attr("type", "file");
input.trigger("click");

在我的项目中，我想要相同的效果，但没有jQuery。我以为我在这里有它：

var input = document.createElement("input");
input.setAttribute("type", "file");
input.dispatchEvent(new Event("click"));

但没有任何反应。我做错了什么？

Answer 1

在您的情况下，只需要一个简单的click（）调用即可触发事件。或者，如果您想使用调度事件，则需要创建Mouse Event并触发该事件。

var fi = document.querySelector("#f");

// simple call to click()
document.querySelector("button.test1").addEventListener("click", function() {
 f.click()
});

// Or with dispatch event
document.querySelector("button.test2").addEventListener("click", function() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  fi.dispatchEvent(event);
});

<input id="f" type="file" />
<button class="test1" type="button"> CLICK ME 1</button>
<button class="test2" type="button"> CLICK ME 2</button>

Answer 2

您可以使用initMouseEvent替代trigger

此处为api function clickSimulation(id) { var theEvent; var theElement = document.getElementById(id); if (document.createEvent) { theEvent = document.createEvent("MouseEvents"); theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } (theEvent) ? theElement.dispatchEvent(theEvent) : (theElement.click && theElement.click()); } var input = $(document.createElement("input")); input.attr("type", "file"); input.attr("id", "TheFileCatcher"); clickSimulation("TheFileCatcher");，了解详情

phone-pad

Answer 3

我认为你只是错过了一个事件监听器。尝试以下构造：

// Create an input object
var input = $(document.createElement("input"));
input.attr("type", "file");

// Add an event listener
input.addEventListener("click", function(e) {
  console.log(e.detail);
});

// Create the event
var event = new CustomEvent("click", { "detail": "My click event" });

// Dispatch/Trigger/Fire the event
input.dispatchEvent(event);

您还可以尝试“播放”事件类型，因此您可以尝试使用代码中的CustomEvent代替click，因为"""Import all the packages useful for the Demo. #-Pyfhel is useful to generate keys, encrypt and decrypt. #-PyPtxt is useful to tranform the input vectors into plain text objects that could be encrypted. #-PyCtxt is useful to tranform the plain text object in PyCtxt object that are encrypted (Cypher texts). PyCtxt can be add, multiply etc with homeomorphic operations.""" from Pyfhel import Pyfhel from PyPtxt import PyPtxt from PyCtxt import PyCtxt """Other imports useful for the demo.""" from itertools import izip import itertools from operator import sub import numpy as np import matplotlib.pyplot as plt import sys import argparse import copy import datetime import os #Instantiate a Pyfhel object called HE. HE = Pyfhel() print("******Generation of the keys for encryption******") #Create the Key Generator parameters. KEYGEN_PARAMS={ "p":257, "r":1, "d":1, "c":2, "sec":80, "w":64, "L":10, "m":-1, "R":3, "s":0, "gens":[], "ords":[]} """Print the Key Generator parameters to let the user knows how his vectors will be encrypted.""" print(" Running KeyGen with params:") print(KEYGEN_PARAMS) """Generate the keys that will be use to encrypted the vectors. The generation of the keys uses the Key Generator parameters. Then print a message to inform the user that the key generation has been completed.""" HE.keyGen(KEYGEN_PARAMS) print(" KeyGen completed") var1 = HE.encrypt(PyPtxt([130], HE)) var2 = HE.encrypt(PyPtxt([10], HE)) xyz = var2 - var1 abc = HE.decrypt(xyz) abc[0][0] # 137 print(abc[0][0] - 257) # output: -120不是自定义代码。我认为问题是因为你缺少一个事件监听器

Ref原来的回答

编辑找到有关以编程方式触发文件输入的安全限制的信息

当输入字段未收到直接点击（或键盘）事件作为安全预防措施时，大多数浏览器都会阻止提交文件。某些浏览器（例如Google Chrome）只是阻止点击事件，例如Internet Explorer不提交由编程触发的文件输入字段选择的任何文件。到目前为止，Firefox 4（及更高版本）是唯一一个完全支持在完全隐藏（display：none）文件输入字段上调用“click”-Events的浏览器。

无法找到非jQuery等效的“触发器”

3 个答案: