input-type=file onchange事件未在googlechrome/ffirefox中启动

input type=file onchange event is not firing in google chrome/firefox

本文关键字：googlechrome ffirefox 启动 file onchange 事件 input-type      更新时间：2023-09-26

更新：

已解决：http://jsfiddle.net/TmUmG/230/




原问题：

我有一个图像/标志，旁边隐藏的输入类型=文件：

<form class="image fit" id="theuploadform">
     <input title="click me to change logo" type="image" src="images/sample_image.jpg" style="width:inherit;height:inherit"/>
     <input type="file" id="userfile" name="userfile" style="display:none" />
</form>

这个想法是点击图片浏览文件，上传并刷新原始图片。我的代码可以在IE中使用，但不能在Chrome/FF中使用(

点击处理：

// click for image upload
$("input[type='image']").click(function () {
    $("input[id='userfile']").click();
});

这将提示我选择一个文件。一旦更改，我想提交表格：

    // upload image form 
$("input[id='userfile']").on("change", function() { 
    //alert('here!');
    var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>');
    $("body").append(iframe);
    var form = $('#theuploadform');
    form.attr("action", "/UploadHandler.ashx");
    form.attr("method", "post");
    form.attr("encoding", "multipart/form-data");
    form.attr("enctype", "multipart/form-data");
    form.attr("target", "postiframe");
    form.attr("file", $('#userfile').val());
    form.submit();
    $("#postiframe").load(function () {
        iframeContents = this.contentWindow.document.body.innerHTML;
        $("#textarea").html(iframeContents);
        var filename = $('#userfile').val().replace(/''/g, '/');
        var fileNameIndex = filename.lastIndexOf("/") + 1;
        filename = filename.substr(fileNameIndex);
        $("input[type='image']").attr("src", "Uploads/" + filename);
    });
    //return false;
});

以上工作均在IE 9+中完成。

我刚刚发现这篇文章：使用输入类型="上传文件；文件"；IE和Chrome中不总是触发带有.change((事件的字段还不确定，但听起来很有意义。

解决方案：对firefox使用"oninput"而不是"onchange"。

相关文章：