zoukankan      html  css  js  c++  java
  • 关于ajaxFileUpload只能上传一次的解决

    今天用ajaxFileUpload做了一个上传文件到服务器的功能。

    出现问题:先上传了一次,后来发现读取完成以后,再上传的时候前台调试file和自动义参数都传进,但后台获取的仍然是上一次上传时的相关参数,必须要刷新页面才可以再次上传。

    原因:上查资料明确问题应该是ajaxFileUpload.js插件问题所致。

    网上解决办法:在ajaxFileUpload.js源码中找到:createUploadForm 找到这一段

    [javascript] view plain copy
     
    1. <pre name="code" class="javascript">var oldElement = $('#' + fileElementId);    
    2. var newElement = $(oldElement).clone();    
    3. $(oldElement).attr('id', fileId);    
    4. $(oldElement).before(newElement);    
    5. $(oldElement).appendTo(form);   

    改为:

    [javascript] view plain copy
     
    1. var oldElement = $('#' + fileElementId);    
    2. var newElement = $(oldElement).clone(true);    
    3. //需要复制元素的所有事件处理。  
    4. $(oldElement).attr('id', fileId);    
    5. $(oldElement).before(newElement);    
    6. $(oldElement).appendTo(form);   

    然而处理后并没有用,仔细分析ajaxFileUpload.js源码后,是由于第一次上传插入一个id="fireUploadForm"+id的表单到body中,第二次上传时这个form表单仍然存在,通过form的Id去拿form时是上一次上传时的表单。

    [javascript] view plain copy
     
    1. //(此段为ajaxFileUpload.js源码)  
    2. var form = jQuery('#' + formId); //这里拿到的还是上一次上传数据时的表单  
    3. jQuery(form).attr('action', s.url);  
    4. jQuery(form).attr('method', 'POST');  
    5. jQuery(form).attr('target', frameId);  

    打印输出:

    [javascript] view plain copy
     
    1. //此段为自己的js var name=$("#name option:selected").text();  
    2.  var type=$("input[name='type']:checked").val();  
    3.  var formId = 'jUploadForm' + 'file';  //file为input的id  
    4.  var test1 = jQuery('#'+formId);  
    5.  console.log("1:"+test1.prop("outerHTML"));//打印输出  
    6.  $.ajaxFileUpload(...);  

    第一次上传:

    [plain] view plain copy
     
    1. 1:undefined  

    第二次上传:

    [plain] view plain copy
     
    1. 1:<form action="importData" method="POST" name="jUploadFormfile" id="jUploadFormfile"   
    2. enctype="multipart/form-data" target="jUploadFramefile" style="position: absolute; top: -1200px; left: -1200px;"><input type="file" name="file" id="jUploadFilefile"><input type="hidden" name="projectName" value="AutoTestingTool"><input type="hidden" name="importType" value="1"></form>  

    解决办法:

    [javascript] view plain copy
     
    1. var name=$("#name option:selected").text();  
    2. var type=$("input[name='type']:checked").val();  
    3. var formId = 'jUploadForm' + 'file';  //file为input的id  
    4. var test1 = jQuery('#'+formId);  
    5.        if(test1.length>0){  
    6.       test1.remove();  
    7.   } //如果存在id = formId的表单,先进行删除,处理掉上一次上传遗留的form</span></span><span   
    8. $.ajaxFileUpload(  
    9.         {  
    10.             url: 'importData',//用于文件上传的服务器端请求地址,url传参?name='+name+'&&type='+type+''  
    11.             secureuri: false, //是否需要安全协议,一般设置为false  
    12.             fileElementId: 'file', //文件上传域的ID  
    13.             dataType: 'json', //返回值类型 一般设置为json  
    14.             data:{"name":name,"type":type} //传参存在问题,可改url传参  
    15.         }  
    16. );  
  • 相关阅读:
    加密的PDF文件怎么查看
    SQL Server数据库中怎么加密数据
    虚拟磁盘也加密
    怎么用密码保护您的文件夹
    如何用cmd命令加密文件夹
    快压轻松创建加密压缩包
    GPS学习的一些链接
    【最新软件预告】邮件群发器Console版
    第六格很酷的滚动活动会员条
    邀请您加入移动开发专家联盟
  • 原文地址:https://www.cnblogs.com/donchen/p/7798075.html
Copyright © 2011-2022 走看看