jquery 验证代码可以工作，但最终会在两个不同的文件夹中上传相同的文件

Question

我有下面的 qjeruy 代码，效果很好

$("#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
    }
  });

问题是我以两种不同的形式名称发送两组不同的文件，一个是上传，另一个是背景图像，但它最终会上传两个文件夹中的文件同一组文件。

我很困惑这里出了什么问题，下面是我的服务器代码

<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> 

像上面一样，我对另一个表单字段（即背景图像）有相同的内容，它在两个不同的表中插入相同的文件，我确信服务器端可能会出现混乱

我尝试了上面的代码，它似乎可以工作，但最终在两个不同的文件夹中得到相同的图像

Answer 1

你的 JS 代码看起来不错。

formData.append('uploadedFiles', file); // for uploadedFiles
formData.append('backImage', file);     // for backImage

但是，在服务器端，您似乎在相同的条件下处理两组文件：

<cfif isDefined('structform.uploadedFiles') AND !arrayIsEmpty(structform.uploadedFiles)>

此条件检查 uploadedFiles 是否存在，但不区分 uploadedFiles 和 backImage。

您需要调整服务器端代码以分别处理 uploadedFiles 和 backImage。

<cfif isDefined('structform.uploadedFiles') AND !arrayIsEmpty(structform.uploadedFiles)>
    <!--- Process uploadedFiles here --->
</cfif>

<cfif isDefined('structform.backImage') AND !arrayIsEmpty(structform.backImage)>
    <!--- Process backImage here --->
</cfif>

因此，现在您的服务器端代码将分别处理 uploadedFiles 和 backImage，从而防止将同一组文件上传到两个文件夹的问题。确保调整变量名称 (backImage) 以匹配从客户端发送的内容。