使用 jQuery.form 通过 ajax 将 input[type=file] 发送到 CodeIgniter答案

【问题标题】：Sending input[type=file] through ajax to CodeIgniter using jQuery.form使用 jQuery.form 通过 ajax 将 input[type=file] 发送到 CodeIgniter
【发布时间】：2013-02-12 14:15:23
【问题描述】：

这是基本的html 表单：

<?php echo form_open( 'controller' ); ?>  
  <fieldset>
    <input type="text" name="field_name_1" value="<?php echo set_value('field_name_1'); ?>"/>
    <input type="file" name="field_name_2" value="<?php echo set_value('field_name_2'); ?>"/>
    // more dynamically added form fields
    <input type="submit" />
  </fieldset>
<?php echo form_close(); ?>

我希望通过ajax 和jQuery Form Plugin 将我的input[type=file] 发送到其控制器（与其他输入类型一起）。

下面的代码适用于除input[type=file] 之外的所有其他输入类型。

<script src="http://malsup.github.com/jquery.form.js"></script> 

var options = {
    url: "<?php echo site_url('new_account/validate_new_account'); ?>",
    type: 'POST',
    dataType: 'json',
    success: function(data) {

      if (data.length === 0) {
        alert('Form successfully submitted!');
      } else {
        alert("Some fields weren't answered successfully. Please answer them.");
        // attach server-side form validations to respective fields
        $.each(data, function(key, value){
          var container = '<div class="error">'+value+'</div>';
          $('.form-element input[name="'+key+'"]').after(container);
        });
      }

    }
};

$('#main-submit').click(function(e) {
  $('#professional-form').valid(); // jQuery validate
  $('#professional-form').ajaxSubmit(options);  
  e.preventDefault(); // redirect to other place only if successful form 
});

其他输入字段发送成功，但CodeIgniter 仍然没有收到文件。你们知道如何解决这个问题吗？

【问题讨论】：

也需要看你的html代码
@Sandeep Kumar - 我添加了我的html 代码
首先尝试使用基本的html表单标签而不是codeigniter，并且不要忘记在表单属性中添加enctype="multipart/form-data"

标签： javascript jquery ajax forms codeigniter

【解决方案1】：

通常无法通过标准 ajax 发布来上传文件。但是，有些工具允许异步上传文件：

您不能使用标准 jquery 帖子执行此操作的原因是出于安全原因 javascript 无法读取本地文件。这些工具使用各种解决方案（例如隐藏的 iframe、Flash 或 HTML5 技术）绕过限制，具体取决于浏览器上可用的内容。

【讨论】：

感谢您的回答。所以这意味着我不能在一个过程中发送我所有的多部分表单值？ :( 我的意思是我必须以另一种形式将文件上传分开？
我只使用了 JQuery-File-Upload。有了它，您可以随文件一起提交额外的 POST 数据，因此您可以一次性提交所有内容，但必须通过异步文件上传工具。
顺便说一下，我认为 plupload 是这两者中更高级的，可能得到更好的支持，我希望你也可以使用它提交额外的表单数据。所以如果我现在必须选择，我会从那个开始。
请注意，您可以使用ajax上传文件，但是IE

【解决方案2】：

可以通过带有 jquery.form.js 的 ajax 上传文件，如下链接所述：

http://malsup.com/jquery/form/#file-upload

【讨论】：