JQuery Validation代码正常但文件重复上传至不同文件夹问题

问题描述 #

通过两个不同表单字段（uploadedFiles和backImage）提交两组不同文件，但最终相同文件被存入两个不同文件夹，对应数据库表也插入了相同的文件记录，怀疑后端ColdFusion代码存在问题。

前端jQuery代码 #

$("#formAbout").validate({
    ignore:[],
    errorPlacement: function (error, element) {               
        var lastError = $(element).data('lastError'),
            newError = $(error).text();
        $(element).data('lastError', newError);                
        if(newError !== '' && newError !== lastError){
            $(element).tooltipster('content', newError);
            $(element).tooltipster('show');
        }
    },
    success: function (label, element) {
        $(element).tooltipster('hide');
    },
    submitHandler: function(form) { 
      var $form    = $(form),
          formData = new FormData(),
          params   = $form.serializeArray(),
          files    = $form.find('[name="uploadfile"]')[0].files,
          files1   = $form.find('[name="backImage"]')[0].files;
  
      $.each(files, function(i, file) {
          // Append each file with a unique identifier
          formData.append('uploadedFiles', file);
      });
  
      $.each(files1, function(i, file) {
        // Append each file with a unique identifier
        formData.append('backImage', file);
      });
  
      $.each(params, function(i, val) {
          formData.append(val.name, val.value);
      });
  
      $.ajax({
        url:'process.cfm?action=about',
        data: formData,
        mimeType: "multipart/form-data",
        contentType: false,
        processData: false,
        type:'POST',
        dataType: 'html',
        success: function(data) {
          var json = $.parseJSON(data);
          if(json.valid) {
            showAlert(json.message, 'success');
          } else {
            showAlert(json.message, 'error');
          }
        },
        error: function(textStatus,errorThrown) {
          showAlert('An error occurred during the operation.' + textStatus, 'error');
        }
    });
    return false; // required to block normal submit since you used ajax
    }
  });

后端ColdFusion代码（uploadedFiles处理部分） #

<cfif isDefined('structform.uploadedFiles') AND !arrayIsEmpty(structform.uploadedFiles)>
    <cfset dirCreate(request.upload & "/" & idojoID & "_img")>
    <cfset var filePath = request.upload & "/" & idojoID & "_img">
    <cffile  action="uploadAll" filefield="structform.uploadedFiles" destination="#filePath#" nameconflict="MAKEUNIQUE" />
    <cfloop array="#cffile.uploadallresults#" item="i" index="idx">
        <cfset originalFileNameImg = i.clientFile>
        <cfset uniqueFileNameImg = "#CreateUUID()#" & "." & ListLast(originalFileNameImg, '.')>
        <cffile action="rename" source="#filePath#/#originalFileNameImg#" destination="#filePath#/#uniqueFileNameImg#" attributes="normal">
        <cfset actualFileImg = Request.BaseURL & "upload/" & idojoID & "_img" & "/" & uniqueFileNameImg>
        <cfset imageObj = imageRead(actualFileImg)>
        <cfset imageResize(imageObj, imageW, imageH)>
        <cfimage action="write" source="#imageObj#" destination="#filePath#/#uniqueFileNameImg#" overwrite="true">
        <cfset actualFileName = uniqueFileNameImg>
        <cfset addWatermark("#filePath#/#actualFileName#", "#request.AppSiteWatermarkName#")>
        <cfquery name="insertImage">
            INSERT INTO images (imageName, imageDojoID)
            VALUES ('#actualFileName#', #idojoID#)
        </cfquery>
    </cfloop>
</cfif> 

注：针对backImage字段有类似的处理逻辑

问题原因分析及排查步骤 #

可能的核心原因 #

• 复制代码未修改关键参数：处理backImage的代码大概率直接复制了uploadedFiles的逻辑，但未修改条件判断和cffile的filefield属性，导致重复处理同一组文件。
• 全局变量污染：cffile是ColdFusion的全局变量，处理完uploadedFiles后未重置，导致处理backImage时复用了之前的cffile.uploadallresults数据。
• 表单字段名称不匹配：前端表单中两个文件输入框的name属性可能有误，导致后端接收到的两组文件实际是同一批。

具体排查步骤 #

1. 检查backImage处理代码的条件判断：确认判断条件是isDefined('structform.backImage') AND !arrayIsEmpty(structform.backImage)，而非复用uploadedFiles的判断。
2. 检查backImage的cffile配置：确认cffile标签的filefield属性为structform.backImage，而非structform.uploadedFiles。
3. 验证前端表单字段：确认两个文件输入框的name属性分别为uploadfile和backImage，与前端JS中的选择器一致。
4. 输出调试信息：在后端代码开头添加<cfdump var="#structform#">，查看uploadedFiles和backImage对应的文件列表是否正确区分。
5. 隔离变量作用域：处理每组文件前，用<cfset var cffile = structNew()>将cffile声明为局部变量，避免全局变量污染。

内容的提问来源于stack exchange，提问作者user23509415