本帖最后由 songwenqi 于 2014-12-18 09:41 编辑
最近写了一个关于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);
}
|