Question

所以我有一个图像，作为输入类型。现在，当您选择所需的文件时，我希望表单提交。那么你就不必按下提交按钮了。所以这就是我做的事情

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="image" id="IMG_1" src="<?php echo $result['profile_picture']?>" alt="">
    <input type="file" onchange='this.form.submit();' id="my_file" style="display: none;" />
</form>

现在的问题是提交的表单，就在文件浏览器打开时，因此不会选择任何文件。那么如何才能阻止这种情况发生，并且只有在用户选择图像时才会继续。

Answer 1

我在使用firefox或chrome（而不是使用IE11）的示例中看不到任何问题。看http://jsfiddle.net/Pd465/1/

我记得在旧的IE版本上有类似的问题。解决方案是将 onchange 更改为 onclick ，并设置0ms的超时。即使它看起来有点hacky它工作，超时只是等待开放对话关闭。（注意：这必须通过浏览器检测完成，因为它不适用于ff或chrome ）

一个纯粹的JavaScript解决方案是（用于jQuery解决方案查看上一次编辑）：

function submitForm(){
   window.setTimeout(
       function(){
           //will be executed when the dialog is closed -> submit your form
           //you might want to check if a file is selected here since the onclick will be triggered also in case of pressing 'cancel'-button
            document.getElementById('submitForm').submit();
       }, 0
   );
}
....

<form id="submitForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="image" id="IMG_1" src="<?php echo $result['profile_picture']?>" alt="">
    <input type="file" onclick='submitForm();' id="my_file" style="display: none;" />
</form>

编辑： 我再次找到了这篇文章：Jquery: change event to input file on IE

编辑：
我没有看到这不仅是javascript而且还有jQuery标记...所以我认为你可以超越上面提到的文章 @Clint Tseng 的解决方案。他的解决方案：

var $input = $('#your-file-input-element');

var someFunction = function()
{
    // what you actually want to do
};

if ($.browser.msie)
{
    // IE suspends timeouts until after the file dialog closes
    $input.click(function(event)
    {
        setTimeout(function()
        {
            if($input.val().length > 0) {
              someFunction();
            }
        }, 0);
    });
}
else
{
    // All other browsers behave
    $input.change(someFunction);
}

Answer 2

在我看来，你在同一时间谈论两件不同的事情。首先，使用type="image"。如果您希望代码跨浏览器可靠地呈现，那么它应仅用于两个目的：

在单击必须是合适的地理地图的图像时输入光标焦点的地理坐标。
用作提交按钮。

查看完整报道http://www.w3.org/TR/html-markup/input.image.html。

您要讨论的第二件事是提交表单而不必单击带有提交功能的节点，但不提交页面上传。这只是语法正确的问题：live demo;使用过的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo auto-submit</title>
</head>
<body>
    <form name="theForm" action="http://www.google.com">
        <input type="file" onchange="theForm.submit()">
    </form>
</body>
</html>

提交没有提交按钮

2 个答案: