AJAX 文件上传失败答案

【问题标题】：AJAX file upload failsAJAX 文件上传失败
【发布时间】：2014-10-21 23:21:50
【问题描述】：

我无法像几个教程中描述的那样上传我的文件，我什至在 stackoverflow 上遵循了多个指南，每次我收到 ajax 错误。

我的 html 表单在 codeigniter 中，如下所示：

 <?php echo form_open_multipart($this->uri->uri_string(), 'class="form-horizontal"'); ?>
 <fieldset>

    <div class="control-group <?php echo form_error('gid') ? 'error' : ''; ?>">
    <?php echo form_label('Image Gallery', 'athletes_gid', array('class' => 'control-label')); ?>
    <div class='controls' >

    <input id='athletes_gid' type='file' name='athletes_gid[]' multiple value="<?php echo set_value('athletes_gid[]', isset($athletes['gid']) ? $athletes['gid'] : time()); ?>" /><br/><br/>
    <div id="addimg" class="btn">Add images</div><br/><br/>

    <input type="submit" name="save" class="btn btn-primary" value="<?php echo lang('athletes_action_edit'); ?>"  />

 </fieldset>
 <?php echo form_close(); ?>

基本上只是普通的文件输入字段。我的 jquery 是这样的：

//ajax img upload
// Variable to store your files
var files;

// Add events
$('#athletes_gid').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
   files = event.target.files;
}

//So now you have a FormData object, ready to be sent along with the XMLHttpRequest.
$( "#addimg" ).click(function() { 

   var data = new FormData();
   $.each(files, function(key, value)
   {
      data.append(key, value);
   });

   $.ajax({
       url: "/public/index.php/admin/content/athletes/multiUpload",
       data: {data: JSON.stringify(data), ci_csrf_token: $("input[name=ci_csrf_token]").val()},
       cache: false,
       contentType: false,
       processData: false,
       type: 'POST',
       success: function(data){
          alert(data);
       }
   });
});

如果我在添加一些要上传的图片文件后单击该按钮“添加图像”，则什么都没有...我在某处 Firefox 不喜欢 contentType: false 但我不确定...

【问题讨论】：

你能展示你的php脚本来处理吗？可能是在您的 php 脚本中 /tmp 路径和它存储文件的实际路径可能是一个问题。

标签： javascript html ajax codeigniter

【解决方案1】：

好吧，出于明显的安全原因，Javascript 无法访问文件系统。

在这种情况下，我所做的是创建一个隐藏的 iframe，然后我提交针对此框架的表单。使用 Javascript 我可以读取 iframe html，然后我知道上传的结果。

另一种解决方案是通过 javascript 访问隐藏的 swf ( flash )，您使用此 swf 执行所有上传任务。

【讨论】：