使用jQuery.form通过ajax发送输入[type = file]到CodeIgniter [英] Sending input[type=file] through ajax to CodeIgniter using jQuery.form

问题描述

以下是基本的 html 表单：

 < ;? php echo form_open（'controller'）; > 
< fieldset> 
< input type =textname =field_name_1value =<？php echo set_value（'field_name_1'）;？>/> 
< input type =filename =field_name_2value =<？php echo set_value（'field_name_2'）;？>/> 
 //更多动态添加的表单字段
< input type =submit/> 
< / fieldset> 
<？php echo form_close（）; > 
   

我想要输入[type = file] c $ c>通过 ajax 和 jQuery Form Plugin 。

我有以下代码适用于所有其他输入除输入[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（某些字段未能成功应答，请回答。 
 //将服务器端表单验证附加到相应的字段
 $ .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（）; //如果成功，重定向到其他地方
} 
 

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

解决方案

文件上传一般不可能通过标准的ajax发布。但是有一些工具允许异步上传文件：

• http://blueimp.github.com/jQuery-File-Upload/


• http://www.plupload.com/

之所以不能使用标准的jquery post是因为javascript出于安全原因不能读取本地文件。这些工具会根据浏览器上的可用内容使用各种解决方案（例如隐藏的iframe，Flash或HTML5技术）来解决此限制。

Here is the basic html form:

<?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(); ?>

I want my input[type=file] to be sent to its controller (together with the other input types as one) via ajax and the jQuery Form Plugin.

I have the code below that works on all the other input types except for 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 
});

The other input fields are sent successfully but CodeIgniter still does not receive the file. Do you guys know how to fix this?

解决方案

File upload is not generally possible via standard ajax posting. However there are certain tools out there that allow asynchronous uploading of files:

• http://blueimp.github.com/jQuery-File-Upload/
• http://www.plupload.com/

The reason you can't do this using a standard jquery post is because javascript can't read local files for security reasons. These tools get around the limitation using various solutions such as hidden iframes, Flash, or HTML5 techniques, depending on what is available on the browser.

这篇关于使用jQuery.form通过ajax发送输入[type = file]到CodeIgniter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！