tp5 ajax 使用formdata提交数据(包括文件上传)

现在位置：首页 > 编程语言 > web前端 > tp5 ajax 使用formdata提交数据(包括文件上传)

tp5 ajax 使用formdata提交数据(包括文件上传)

龙行 web前端 2018-11-16 5764 0评论

//看看html页面
<form class="form form-horizontal" id="form-article-add" method="post" enctype="multipart/form-data" action="{:url('article/add')}">
        <input type="hidden" name="uid" value="{$Think.session.id}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" name="title">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章小标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" name="s_title">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章分类：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select name="cate_id">
                    {volist name="data" id="vo"}
                    <option value="{$vo.id}">{$vo.catename}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章作者：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" disabled="disabled" value="{$Request.session.admin.username}"  name="author">
            </div>
        </div>

        <div class="row cl" >
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>状态:</label>
                <div class="radio-box">
                    <input name="status" type="radio" value=0 class="btn btn-default radius" id="sex-1" checked>
                    <label for="sex-1">显示</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" value=1 class="btn btn-default radius" name="status">
                    <label for="sex-2">隐藏</label>
                </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">上传文件：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="file" class="input-text" style="border: hidden" value=""  name="file">
            </div>
        </div>
        <div class="row cl">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
        <button class="btn btn-primary radius" id="button"><i class="Hui-iconfont">&#xe632;</i> 保存并提交审核</button>
        </div>
                </div>
                </form>

再来是ajax方法

function submitform() {
                 event.preventDefault();
                 var form  =document.getElementById('recruitinfo'),
                      formdata =  new FormData(form);
                 var url = '{:url("recruitinfo/postfrom")}';
                 $.ajax({
                     url:url,
                     type:'post',
                     data:formdata,
                     dataType:'json',
                     processData:false,
                     contentType:false,
                     success:function (res) {
                         console.log('成功！')
                         console.log(res)
                     },
                     error:function (XMLHttpRequest, textStatus, errorThrown) {
                         console.log('失败！')
                         console.log(XMLHttpRequest);
                         console.log(textStatus);
                         console.log(errorThrown);
                     }
                 })
 
             }

评论一下分享本文赞助站长