草庐IT

javascript - 无法将内容附加到 FormData()

coder 2024-04-18 原文

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

即使 file 有效,我也无法将其附加到 FormData。也没有字符串。事实证明,我只是通过 Ajax 发送空的 XHRequest,因为我没有从 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。 谁能帮帮我?

最佳答案

你的问题在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

关于javascript - 无法将内容附加到 FormData(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28047234/

有关javascript - 无法将内容附加到 FormData()的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]

  3. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  4. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  5. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer,但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  6. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  7. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  8. ruby - 无法覆盖 irb 中的 to_s - 2

    我在pry中定义了一个函数:to_s,但我无法调用它。这个方法去哪里了,怎么调用?pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后,我认为我得到了正确的答案:这个方法用在什么地方?在irb或pry中定义方法时,会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)

  9. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例,但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗? 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055),我们在StackOverflow上找到一个类

  10. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

随机推荐