无法使用prototype.js的Ajax更新程序()从我的表单发布图像

Question

我正试图使用prototype.js的新Ajax update（）方法提交我的表单。当我在控制器中检查请求时，我发现图像字段不存在。在阅读了几篇文章后，我了解到使用Ajax保存图像有一些复杂性。这是我的模板代码：-

<script type = "text/javascript">
    function showWaitingImage( divId ){
        $(divId).innerHTML = "<img src='../spinner.gif'/>Loading...";
    } 
    this.showWaitingImage = showWaitingImage    
    function SubmitStudentinfo() {
        new Ajax.Updater( 'main-form','{{ path('CollageStudentBundle_studentinfo_new') }}', { method: 'post', evalScripts : true, parameters: $('student-form').serialize() , onLoading : showWaitingImage('main-form') } );
    }
    this.SubmitStudentinfo = SubmitStudentinfo
 </script>
 <div id="main-form">
<form {{ form_enctype(form) }} name="student-form" id="student-form" >
{{ form_errors(form) }}
    <table border="1" cellpadding="5" cellspacing="2" width="100%" >
        <tr>
            <td>{{ form_row(form.bloodgroup, { 'attr': {'class': 'input-medium1'} }) }}</td>
            <td>{{ form_row(form.dob, { 'attr': {'class': 'input-medium1'} }) }}</td>
            <td>{{ form_row(form.program_id, { 'attr': {'class': 'input-medium1'} }) }}</td>
            <td>{{ form_row(form.category_id, { 'attr': {'class': 'input-medium1'} }) }}</td>
            <td>{{ form_row(form.picture, { 'attr': {'class': 'input-medium'} }) }}</td>
        </tr>
    </table>

    {{ form_rest(form) }}
    <input type="button" value="Save And Next" onclick="SubmitStudentinfo();"  />
</form>
</div>      

有没有什么方法可以把图片和表单一起发布。或者有没有其他方法可以用来存储图片。

Answer 1

AJAX无法上传文件。有一些变通方法，比如从iframe提交表单，这就是Ajax Upload插件的工作原理。

---

有了HTML5，您现在可以使用FormData上传文件，但不是在所有浏览器中都可以。