Question

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

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

这是否可以使用jQuery，如果是这样的话怎么样？或者我是否需要为jQuery使用特殊的上传插件？

Answer 1

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

Answer 2

您无法通过javascript上传文件。

查看此相关问题：
Is it possible to use Ajax to do file upload?

基本上，两种最常用的“伪造”AJAX文件上传方式是使用Flash插件（例如SWFUpload）或将表单提交给处理请求的隐藏iframe。

Answer 3

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

Answer 4

使用FormData

<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>

Answer 5

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

Answer 6

可能，但无法在Google Chrome中使用）瞧！

...
<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）就是这样但是我没有在大尺寸文件上测试这个脚本

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

6 个答案: