Question

我目前有一个允许用户选择图像的表单。选择图像后，需要单击“提交”按钮。我正在使用jquery，所以调用最终看起来像这样：

$('#image_form').ajaxForm(function(data) { 
   // do some stuff
});

这是HTML：

<form id="image_form" enctype="multipart/form-data" action="load_photo.php" method="post" >
    <input type="hidden" name="MAX_FILE_SIZE" value="8000000" />

    <table>    
        <tr>
            <td>
                <label for="mapimage">Select an image:</label>
            </td>
        </tr>
        <tr>
            <td>
                <input name="file" type="file" id="file"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="Update" name="update_photo" id="update_photo"/>
            </td>
        </tr>
    </table>
</form>

用户浏览照片并选择后，是否可以触发此表单操作？理想情况下，他们不必单击提交按钮。

Answer 1

选择文件后，change元素会触发input[type=file]事件，所以请听一下。

$('#file').change(function(e){
    // do something after a file is selected
    // maybe submit the file?
    e.target.form.submit();
});

Answer 2

如上所述，您可以绑定change事件，但是您无法检测到他们选择了哪个文件，甚至无法检测某些浏览器中该文件的名称 cough 更旧，即我相信咳嗽

您可以做的是获取文件的名称（$("#fileinput").val()），然后在最后一个时间段解析字符串：

// on change
{
    var fileParts = $("#fileinput").val().split(".");
    var extension = fileParts[fileParts.length - 1];
    var validFileExt = new Array("jpg", "jpeg", "bmp", "png", "gif");
    var isImage = jQuery.inArray(extension, validFileExt);
    if (isImage){
        // submit
    }
}

BTW我刚刚编写了代码，所以dbl检查它

当然，您仍然需要为那些浏览器提供传统按钮。

此外，这不是有效的文件验证;）

选择要上传的图像文件后，是否可以触发表单操作？

2 个答案: