尝试通过ajax发送文件时出错

Question

我使用Play framework 1.4.3和Semantic-ui并且我已经试图通过ajax从窗口模态发送一个文件但是在我的控制器中参数到达null并且在Firefox的控制台中显示了这个错误：

TypeError：FormData.constructor的参数1未实现接口HTMLFormElement

控制器行动

import models.fotos.Foto;
import net.sf.jmimemagic.MagicException;
import net.sf.jmimemagic.MagicMatchNotFoundException;
import net.sf.jmimemagic.MagicParseException;
import play.data.validation.Required;
import play.db.jpa.Blob;
import play.libs.MimeTypes;
import play.mvc.Controller;
import util.WelinuxUtils;

public class FileController extends Controller {

public static void addFile(){

   render();
}

public static void addFileHandler(@Required File file)
        throws MagicParseException, MagicMatchNotFoundException, MagicException {

    if (!validation.hasErrors())
        if (WelinuxUtils.validateFormat(file))
            validation.addError("file", "Invalid format");

    if (validation.hasErrors())
        render("@addFile", file);

    Foto foto = new Foto();
    foto.fileName = file.getName();
    foto.image = new Blob();
    foto.image.set(request.body, MimeTypes.getContentType(file.getName()));
    foto.save();

    render("@landingPageFoto", foto);
}
}

HTML：

的index.html

<div class="ui icon info message">
<a class="open-modal" href="#" data-tooltip="Subir Archivo">
    <i class="huge upload icon"></i>
</a>    
<div class="content">
    <div class="header">
       Without file upload
    </div>
    <p>
        Pinche el icono <i class="upload icon"></i> para subir archivo
    </p>
</div>
</div>

<div class="ui modal">
<div class="header">Header</div>
<div class="content">

</div>
</div>

JS

$(function(){

    $('body').on('click','.open-modal',function(){
        $.ajax({
            type:"POST",
            url: "@{FotoController.agregarFotoAdhesion()}",
            success: function (data){
                $('.ui.modal .content').html(data);
                $('.ui.modal').modal('setting', 'transition', 'fade').modal('show');
            }
        });
        return false;
    });
});

addFile.html

<div class="ui form">
#{field 'file'}
    <div class="field ${field.errorClass ? 'error' : ''}">
        <label for="${field.id}">Upload file</label>
        <p class="helper">
        </p>                
        <div class="ui fluid action input">                                   
            <input type="text" id="_attachmentName" value="${field.value ? field.value.getName() : 'Select a file'}" readonly="readonly">
            <label for="attachmentName" class="ui icon button btn-file">
                 <i class="attach icon"></i>
                 <input type="file" name="${field.name}" id="attachmentName" value="${field.value}" style="display: none">
            </label>
        </div>
        #{if field.error}
            <div class="ui pointing red basic label">
                ${field.error}
            </div>
        #{/if}
    </div>      
#{/field}

<p>
    <button class="ui button primary" id="finish-upload">Send</button>
</p>

JS

$(function(){

    $('body').on('click','#finish-upload',function(evt){
        evt.preventDefault();
        var formInput = $('#attachmentName');
        var formData = new FormData(formInput);

        $.ajax({
            url: "@{FileController.addFileHandler()}",
            mimeType: "multipart/form-data",
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            data: formData,
            success: function (data){
                $('.ui.modal .content').html(data);
                $('.ui.modal').modal('setting', 'transition', 'fade').modal('show');
            }
        });
    });
});