jQuery - 使用 $.post 接收 $_FILES 数组

Posted

技术标签:

【中文标题】jQuery - 使用 $.post 接收 $_FILES 数组【英文标题】:jQuery - receiving the $_FILES array using $.post 【发布时间】:2010-10-07 18:55:06 【问题描述】:

我正在尝试通过 jQuery 提交表单。我的表单包含必须上传的字段和文件。它的类型为ENCTYPE="multipart/form-data"

我可以使用以下方式接收我的所有字段值:post = $('#myForm').serialize(); 但是我如何接收$_FILES 数组?我需要这个来处理上传的文件。

这是否可以使用 jQuery,如果可以,如何?或者我需要为 jQuery 使用特殊的上传插件?

【问题讨论】:

【参考方案1】:

您不能通过 javascript 上传文件。

查看这个相关问题:Is it possible to use Ajax to do file upload?

基本上,“伪造”AJAX 用于文件上传的两种最流行的方法是使用 Flash 插件(例如 SWFUpload)或将表单提交到处理请求的隐藏 iframe。

【讨论】:

【参考方案2】:

jquery 表单是最好的方法, 您可以将其添加到任何普通形式中,

<form method="post" action="URL">
<input type="file" name="file">
<input type="text" name"text">
<input type="submit"> 
</form>

<script type="text/javascript">
$(document).ready(function()  
  $(form).ajaxForm();
)
</script>

将按预期工作,但使用 ajax。

http://malsup.com/jquery/form/#code-samples

【讨论】:

【参考方案3】:

如果您可以控制环境,例如,您正在为您推荐浏览器的 Intranet 编写管理应用程序,那么使用 Firefox 3 及更高版本就可以上传真正的 AJAX 文件。在所有其他情况下,iframe 解决方法或基于 Flash 的上传器都是可行的方法。

【讨论】:

【参考方案4】:

这是可能的,但不能在谷歌浏览器中工作) 看!

...
<form method='post' enctype='multipart/form-data'>
<input type="file" id="imf" name="imf"/>
<input type="button" id="Save"/>
</form>

...

$("#Save").live("click", function()

var photo = document.getElementById("imf"); 
var file  = photo.files[0];

   $.post('/user/saveNewPhoto', 'imf':file.getAsDataURL(), fname:file.fileName , function( data )
   alert ( data );
    );

);

上传脚本 需要解码 base64 ),仅此而已 但我不在大文件上测试这个脚本

【讨论】:

【参考方案5】:

表单包含文件输入,但表单上缺少 method=POST 和 enctype=multipart/form-data。文件不会被发送

【讨论】:

【参考方案6】:

使用表单数据

<form>
<label for="imageToSend">Cargar imagen a la galeria</label>
<input type="file" name="imageToSend" id="imageToSend" value="Cargar imagen" />
</form>
<script>
$('#imageToSend').on('change',function(event)
    var dialog = $('#dialog');
    var Data = new FormData();
    Data.append('imageToSend',$('#imageToSend')[0].files);
    $(this).val('');//Clear input file
    $.ajax(
        url: "/upload",
        data: Data,
        processData: false,
        contentType: false,
        type:'POST',
        success: function(data)
            if(data.success)
                //success handler   
            else if(!data.success)
                //error backend handler
            
        ,
        error: function(data)
            //error handler Ej:404 status
        
    )
  );
</script>

【讨论】:

以上是关于jQuery - 使用 $.post 接收 $_FILES 数组的主要内容,如果未能解决你的问题,请参考以下文章

Php没有通过$ _POST接收变量

angular的post传参后台php无法接收

请教 JQUERY 如何 接收处理 JSON格式数据

使用 jQuery ajax post 接收 PHP 参数

POST 到服务器,接收 PDF,使用 jQuery 交付给用户

在 Express 中接收 Jquery POST 数据