html input file onchange事件失灵的解决方法

songwenqi

最近写了一个关于input file的onchange事件，在页面点击上传时需要提交后台，然后再把图片显示出来，发现onchange事件在第一次点击的时候是执行的，但是第二次第三次事件就失灵了，后来是利用remove将本元素移除，再通过生成相同元素的方法来解决onchange事件的失灵事件。遇到了并解决了，所以写在这里，供大家参考。
HTML代码：

[HTML] 纯文本查看 复制代码

<div id="myupload">
        <input type="file" id="uploadfile" name="uploadfile" accept="image/gif, image/jpeg, image/png"/>
        </div>

对应的js代码：

[JavaScript] 纯文本查看 复制代码

$(document).ready(function () {
 $("#uploadfile").change(function () {
        createUploadFile();
    });
});

function createUploadFile() {
    $.ajaxFileUpload
            (
                {
                    url: 'ProcessImage.ashx?act=load', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'uploadfile', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        if (typeof (data) != 'undefined') {
                            createCropzoom(data.url+"?"+Math.random());
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            );
    $("#uploadfile").remove();
    var input = " <input type=\"file\" id=\"uploadfile\" name=\"uploadfile\" onchange=\"createUploadFile()\" accept=\"image/gif, image/jpeg, image/png\"/>";
    $("#myupload").append(input);
      
}

站长苏飞

表示没有这样过这种经历

songwenqi

站长苏飞 发表于 2014-12-18 09:31
表示没有这样过这种经历

这个是在同一个页面有多次点击input file操作并进行图片上传时会遇到这种情况，

love'点点

我只是路过打酱油的。

liuxiangping

请问LZ解决了该问题吗