美文网首页
Ajax提交带文件的表单

Ajax提交带文件的表单

作者: chenzan | 来源:发表于2020-12-18 10:47 被阅读0次

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();

相关文章

网友评论

      本文标题:Ajax提交带文件的表单

      本文链接:https://www.haomeiwen.com/subject/ldsxnktx.html