龙行博客

龙行博客,致力于个人经验分享源码分享,随笔文章
现在位置:首页 > 编程语言 > web前端 > tp5 ajax 使用formdata提交数据(包括文件上传)

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

龙行    web前端    2018-11-16    99    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);
                     }
                 })
 
             }

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

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/97.html
  • 上篇文章:Scrapy利用Spider爬取douyu颜值美女
  • 下篇文章:非常好用的TP5-短信SDK,sms
  • tp5 js
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部