如何在 javascript 中调用输入文件标签 在 safari 浏览器中
How to call a input file tag in javascript In safari Browser?
My JavaScript code:
$("#formimage").click(function(){
$("#avatar").click();
});
<input type="file" name="avatar" id="avatar" style="display: none;" onchange="this.form.submit()" />
在此,它不调用头像文件标签...甚至没有给出任何错误...在浏览器控制台中
很难通过单击其他内容来触发文件类型的输入。您将遇到的最大问题是IE会将其视为安全问题,并且可能不允许您这样做(如果输入是隐藏的)。若要解决此问题,可以"淡入淡出"图像后面的输入,以便当用户单击图像时,他们实际上是在单击文件输入。
您的 html 可能如下所示:
<div class="hiddenFileInputContainter">
<img class="fileDownload" src="/images/ico_upload.png">
<input type="file" name="fileUp" class="hidden" accept="image/*">
</div>
然后,您需要将输入的不透明度设置为零,以便使其后面的图像可见,而无需实际从页面中删除输入:
input[type='file'].hidden
{
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
font-size: 50px;
cursor: pointer;
opacity: 0;
-moz-opacity: 0;
filter: Alpha(Opacity=0);
}
您还需要设置图像和容器的尺寸:
img.fileDownload
{
height: 26px;
width: 26px;
padding: 0;
display: inline-block;
vertical-align: middle;
margin: 0 4px 0 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
div.hiddenFileInputContainter
{
position: relative;
display: inline-block;
width: 27px;
height: 27px;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
请注意,输入的维度是溢出的,因此无论您单击容器的哪个位置,您都将点击其中的输入。输入应尽可能大,按钮的实际尺寸在容器和图像上设置。
一旦您设法打开对话框,提交表单只需执行以下操作:
$("#fileUploadField").on("change", function() {
$("#formId").submit();
});
或者尝试这样做以使文件输入看起来像按钮:
http://blueimp.github.io/jQuery-File-Upload/
相关文章:
- 在谷歌浏览器中,标签之间最快的通信是什么
- 可以'不要让HTML5音频标签在移动浏览器上工作
- 在谷歌浏览器中用程序固定一个标签
- 谷歌浏览器移动模拟器:如何强制它在模拟器中也打开新标签
- 让谷歌浏览器扩展程序只在一个标签上工作
- 如何在使用谷歌浏览器开发者控制台时使变量在标签页中可见
- 如何在谷歌浏览器的新标签页中打开页面中的链接
- 如何从IE浏览器中的输入文件标签中获取javascript中的文件名
- 如何在 javascript 中调用输入文件标签 在 safari 浏览器中
- 在新的浏览器标签页中显示 json
- Chrome 标签页的永久唯一 ID,在浏览器会话之间持续存在
- 谷歌浏览器的“新标签”iframe如何工作
- 在内容可编辑元素上按 Enter 时插入 BR 或 P 标签的跨浏览器方式
- Chrome 在标签页(或浏览器)关闭时打开卸载前事件
- 不要打开新标签页、关闭标签页或关闭浏览器窗口
- 如何使用javascript或jQuery在浏览器中拖放交叉标签
- 浏览器通过浏览器扩展程序通过文件输入标签自动选择文件
- 将自定义用户代理关联到特定的谷歌浏览器页面/标签页
- 检测关闭标签/浏览器没有消息等
- 如何隐藏标签浏览器和获取其内容