zoukankan      html  css  js  c++  java
  • 关于input的file框onchange事件触发一次失效的新的解决方法

    在google了众多方法后,网上有这么几种方法:

    1、替换掉原来的input框

    2、remove原来的input框,然后在添加进新的一样的input框

    但是不知道为什么非常不幸的是,怎么弄我都弄不出。。

    后来我脑袋突然闪过一个灵感,我在触发了一次onchange事件后,他没反应,是不是onchange事件没有绑定,后来发现我的推测是正确的,然后我就重新给他绑定了一个onchange事件,测试通过!!!

    问题解决!!

     1 $("#targetFile").change(function(){  
     2             var filename = $(this).val();  
     3             $("#originalTargetFileName").val(filename);  
     4         });  
     5           
     6         $("#targetUpload").submit(function(){  
     7             $.ajaxFileUpload({  
     8                 type: "post",  
     9                 url: "${pageContext.request.contextPath}/upload.do",  
    10                 secureuri:false,  
    11                 fileElementId:"targetFile",  
    12                 dataType: "json",  
    13                 success: function(result,status) {  
    14                     if (result.success == "1") {  
    15                         alert("上传文件成功!");  
    16                         var filename=getFileNameFromFilePath(result.fileRelativePath);  
    17                         $("#target_upload_info").html("<div>"+"文件:"+filename+"   <a href='javascript:void(0)' onclick='deletefile("+"""+result.fileRelativePath+"","target")'>删除</a>"+"<br/></div>");  
    18                         $("#target_upload_info").css("visibility", "visible");  
    19                         $("#targetFileRelativePath").val(result.fileRelativePath);  
    20                     } else {  
    21                         $("#target_upload_info").html("文件上传失败: " + result.msg);  
    22                         $("#target_upload_info").css({"visibility":"visible", "color":"red"});  
    23                     }  
    24                 },  
    25                 complete: function(xmlHttpRequest) {  
    26                     $("#targetFile").replaceWith('<input type="file" id="targetFile" name="upFile" style="display:none;"/>');  
    27                     $("#targetFile").on("change", function(){  
    28                         var filename = $(this).val();  
    29                         $("#originalTargetFileName").val(filename);  
    30                     });  
    31                 },  
    32                 error: function(data, status, e) {  
    33                     alert("文件上传失败!");  
    34                 }  
    35             });  
    36             return false;  
    37         });  
  • 相关阅读:
    bootstrap表格
    Bootstrap的学习
    cssText文本格式化
    for循环坐标生成《逢五向上转》
    for循环坐标生成《逢十往下一行》
    for
    bootstrap学习笔记细化(表格)
    bootstrap学习笔记细化(按钮)
    bootstrap学习笔记细化(表单)
    bootstrap学习笔记细化(标题)
  • 原文地址:https://www.cnblogs.com/exhuasted/p/6185874.html
Copyright © 2011-2022 走看看