http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 28414|回复: 4
打印 上一主题 下一主题

[HTML/HTML5] html input file onchange事件失灵的解决方法

[复制链接]
跳转到指定楼层
楼主
发表于 2014-12-18 09:16:32 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
本帖最后由 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);
      
}



1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
5
发表于 2015-3-28 15:46:08 | 只看该作者
请问LZ解决了该问题吗
地板
发表于 2014-12-18 10:11:43 | 只看该作者
我只是路过打酱油的。
板凳
 楼主| 发表于 2014-12-18 09:37:00 | 只看该作者
站长苏飞 发表于 2014-12-18 09:31
表示没有这样过这种经历

这个是在同一个页面有多次点击input file操作并进行图片上传时会遇到这种情况,
沙发
发表于 2014-12-18 09:31:47 | 只看该作者
表示没有这样过这种经历
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 17:58

© 2014-2021

快速回复 返回顶部 返回列表