關於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傳參
        }
);