Ajax提交带文件的表单

Ajax提交带文件的表单

1. 使用FormData

需要做特殊处理否则,后台收不到文件参数

JQuery版本要是2.0及以上

前端html代码

<form id="importform" method="post" enctype="multipart/form-data">
    <div class="content">
        <div class="title_right">
            <input type="text" name="名称" id="name" class="textInput"/>
        </div>
        <br/>
        <div class="add_scroll_div_x" id="center" style="text-align: center; margin: 0 auto; heigth:40px;">
          <input type="file" id="doc" name="doc" style="width:100%" accept="application/msexcel"/>
        </div>
        <div class="add_bottom">
            <input type="button"  onclick="importExcelData();"/>
            <input type="button" id="cancelButton" onclick="window.close();"/>
        </div>
    </div>
</form>

js提交代码

var formData = new FormData(document.getElementById("importform"));//表单id
$.ajax({
    type: 'post',
    processData: false,//这个必须有,不然会报错
    contentType: false,//这个必须有,不然会报错
    data: formData,
    url: '${ctx}/emergencyPlanTask/impExclData.action',
    cache: false,
    dataType: 'json',
    success: function (data) {
        
    }
});

2.使用jquery.form.js插件

html

<form id="uploadForm">
    <input type="file" name="image"/>
    <input type="text" name="username"/>
    <input type="button" value="提交" onclick="upload();"/>
</form>

使用jquery.form.js的js代码(支持文件上传)

$("#uploadForm").ajaxSubmit();
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容