關於ajaxFileUpload只能上傳一次的解決

今天用ajaxFileUpload做了一個上傳文件到服務器的功能。

出現問題：先上傳了一次，后來發現讀取完成以后，再上傳的時候前台調試file和自動義參數都傳進，但后台獲取的仍然是上一次上傳時的相關參數，必須要刷新頁面才可以再次上傳。

原因：上查資料明確問題應該是ajaxFileUpload.js插件問題所致。

網上解決辦法：在ajaxFileUpload.js源碼中找到：createUploadForm 找到這一段

 

<pre name="code" class="javascript">var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);

改為：

 

var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone(true);
//需要復制元素的所有事件處理。
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);

然而處理后並沒有用，仔細分析ajaxFileUpload.js源碼后，是由於第一次上傳插入一個id="fireUploadForm"+id的表單到body中，第二次上傳時這個form表單仍然存在，通過form的Id去拿form時是上一次上傳時的表單。

 

//（此段為ajaxFileUpload.js源碼）
var form = jQuery('#' + formId); //這里拿到的還是上一次上傳數據時的表單
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);

打印輸出：

 

//此段為自己的js var name=$("#name option:selected").text();
 var type=$("input[name='type']:checked").val();
 var formId = 'jUploadForm' + 'file';  //file為input的id
 var test1 = jQuery('#'+formId);
 console.log("1:"+test1.prop("outerHTML"));//打印輸出
 $.ajaxFileUpload(...);

第一次上傳：

 

 

1:undefined

第二次上傳：

 

 

1:<form action="importData" method="POST" name="jUploadFormfile" id="jUploadFormfile"
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>

 

解決辦法：

var name=$("#name option:selected").text();
var type=$("input[name='type']:checked").val();
var formId = 'jUploadForm' + 'file';  //file為input的id
var test1 = jQuery('#'+formId);
       if(test1.length>0){
      test1.remove();
  } //如果存在id = formId的表單，先進行刪除，處理掉上一次上傳遺留的form</span></span><span
$.ajaxFileUpload(
        {
            url: 'importData',//用於文件上傳的服務器端請求地址，url傳參?name='+name+'&&type='+type+''
            secureuri: false, //是否需要安全協議，一般設置為false
            fileElementId: 'file', //文件上傳域的ID
            dataType: 'json', //返回值類型 一般設置為json
            data:{"name":name,"type":type} //傳參存在問題，可改url傳參
        }
);