Question

我有两个不同的JS函数来处理图片上传。一个用于读取文件并（全局）创建FormData对象，另一个用于通过AJAX将其发送到PHP文件。

即使file有效，我也无法将其附加到FormData。并且没有字符串。事实证明，我只是通过Ajax发送空的XHRequests，因为我没有从PHP获得任何其他内容，然后是空数组。

由于第一个JS函数全局初始化formData变量，第二个函数使用它应该没有问题，我是对的吗？

我的Javascript看起来像这样（我注释掉了一些不必要的行：

   $(document).ready(function(){

      var formUplImg = $('.form-upl-img');
      var fileInput  = $('.file-input');

      // Analyse files from input immediately
      fileInput.on('change', function(){
         readFile($(this).attr('id'));
      })

      // Upload images on submit
      formUplImg.on('submit', function(event) {
         uploadImg($(this), event);
      });



      function readFile(id){
         // Grab file that's supposed to be uploaded
         var fileInput = document.getElementById(id);
         var fileCount = fileInput.files.length;
             formData  = new FormData();

         // If there is no file
         if( fileCount!= 1 ){
            // goodImg    = false;
            // Error message
            // showMsgBar(iClose, 'Da ist nichts.', 'Bitte wähle zuerst eine Datei aus.', red);

         // If there is a file
         } else {
            // Save file attributes
            var file      = fileInput.files[0];
            var fileName  = fileInput.files[0].name;
            var fileSize  = fileInput.files[0].size;
            var fileType  = fileInput.files[0].type;

            // If file is not an image
            if( !fileType.match(/image.*/) ) {
               // goodImg    = false;
               // Error message
               // showMsgBar(iClose, 'Ungültiger Dateityp.', 'Das Bild muss ein JPG, PNG, GIF oder SVG sein.', red);

            // If file is an image
            } else {
               // If file size exceeds 3MB
               if( fileSize > 3145728 ) {
                  // goodImg = false;
                  // Error message
                  // showMsgBar(iClose, 'Das Bild ist zu groß.', 'Die Dateigröße darf max. 3MB betragen.', red);

               // If image file size is ok
               } else {
                  // goodImg = true;
                  // Distinguish img use cases
                  if( fileInput.id.indexOf('icon') > -1 ) {
                     var imgUsage = 'icon'; // round user icon (for usage in header)
                  } else if ( fileInput.id.indexOf('logo') > -1 ) {
                     var imgUsage = 'logo'; // horizontal logo (contributors/admin or corporation logo)
                  } else if ( fileInput.id.indexOf('photo') > -1 ) {
                     var imgUsage = 'photo'; // photo for posts
                  } // img use cases

   console.log(file, imgUsage); // => the file with all attributes + 'icon'
                  formData.append(imgUsage+'_upload_input', file);
                  formData.append('img-usage', imgUsage);
   console.log(file, imgUsage); // => the file with all attributes + 'icon'
               } // /file size is ok
            } // /file is an image
         } // /file is not empty
      } // /readFile()


      function uploadImg($this, event){

         var serialForm = $this.serialize();
   console.log(serialForm.toString()); // => 'user_id=36'
         $.ajax({
            url        : "test-upload.php",
            type       : "POST",
            data       : formData+serialForm, 
            async      : true,
            cache      : false,
            processData: false,
            contentType: false,
            success    : function(callback){

   console.log(callback);
               formdata = new FormData();
            }
         });
         event.preventDefault();

      } // /uploadImg
   }); // /jQuery

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8" />
   <title>Test</title>
   <script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
   <script type="text/javascript">
</head>
<body>
   <h1>Test</h1>

            <form action="" method="post" name="form_profile_icon_upload" class="form form-profile form-upl-img form-profile-side-right" id="form-profile-icon-upload" enctype="multipart/form-data">
               <fieldset class="fieldset icon-upload-fieldset" id="profile-icon-upload-fieldset">
                  <legend class="legend">Icon ändern <span class="label-span">(siehe oben)</span></legend>
                     <input type="file" name="icon_upload_input" class="file-input icon-upload-input" id="profile-icon-upload-input" />
                     <p class="form-txt"><strong>Hinweis:</strong><br />
                        Die Dateigröße darf <strong>3 MB</strong> nicht überschreiten. Quadratische Icons eignen sich optimal, sind aber kein Muss.</p>
                     <input type="hidden" name="user_id" value="36" />
                     <button type="submit" name="profile_icon_upl_btn" class="button button-green form-sbmt-btn" id="profile-icon-upl-btn" value="Hochladen">Hochladen</button>
                     <p class="img-del-txt">
                     </p>
               </fieldset>
            </form><!-- Icon upload form -->


</body>
</html>

PHP文件看起来像这样（用于测试目的）：

<?php

   if( isset($_POST) && isset($_FILES) ){

print_r($_POST);
echo ($_POST['icon_upload_input']);
print_r($_FILES);
die();

   }

我正在使用最新的Firefox 35.0和jQuery 2.1.3。任何人都可以帮助我吗？

Answer 1

你的问题在这里data: formData+serialForm, FormData必须单独传递，如果要使用构造函数或append向其添加数据。

function uploadImg($this, event){
    var formData  = new FormData($this[0]); //construct the form data with the form
    ... 
    formData.append(imgUsage+'_upload_input', file);
    formData.append('img-usage', imgUsage);
    ...
        data: formData, //just pass the formdata object

Answer 2

尝试读取这样的文件：

var file     = $('.file-input').prop('files')[0];
formData.append('file',file);

这对我有用！

无法将内容附加到FormData（）

2 个答案: