Javascript 不使用提交按钮提交_Javascript_Php_Jquery_Html_Forms

Javascript 不使用提交按钮提交

javascript php jquery html forms

Javascript 不使用提交按钮提交,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,所以我有一个图像，作为输入类型。现在，当您选择所需的文件时，我希望表单提交。这样你就不必按提交按钮了。这就是我所做的 <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="image" id="IMG_1" src="<?php echo $result['profile_picture']?>" alt=""> <input

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

<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>


我看不出您的firefox或chrome示例有任何问题（IE11除外）。看
我记得在旧的IE版本上有一个类似的问题。解决方案是将onchange更改为onclick，并将超时设置为0ms。即使它看起来有点不正常，但它工作了，超时只是等待打开对话框关闭。（注意：这必须通过浏览器检测完成，因为它在ff或chrome上不起作用）
纯javascript解决方案是（对于jQuery解决方案，请查看最后一次编辑）：
在我看来，你在同时谈论两件不同的事情。首先，使用type=“image”
。如果希望跨浏览器可靠地呈现代码，则只能用于两个目的：
单击图像时输入光标焦点的地理坐标，图像必须是合适的地理地图
用作提交按钮
有关完整的故事，请参阅
第二件事是提交表单，而不必单击具有提交功能的节点，但不必在页面加载时提交。这只是一个正确语法的问题：；使用的代码：
<!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>


演示自动提交
你不应该自动发送这样的表单，即使在用户选择了一个文件之后也不应该——让他们自己来代替small\u little\u file.txt
意外选择very\u big\u file.blob
甚至my\u password\u list.txt
，而你就有了一个用户体验灾难。好吧，这将是一个图像，我对后端有大小限制。如果它们不是PNG或JPEG，则无法保存@CBroe@user3100859服务器端的事情对停止GiB上传几乎没有什么作用，除非您在流完成之前访问它，并预测终止连接不是说我支持您的整个方法，而是您不能测试是否已做出选择，类似于onchange='if（this.value）{this.form.submit（）；}'
？@nnnnnnthis.value
对type=“file”？如果您使用的是jQuery 1.9或更高版本，则需要在不使用´$.browser´的情况下执行浏览器检查。。。因为浏览器检测在新版本中已被删除，以支持特征检测
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);
}

<!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>