利用formdata提交表单

XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript;用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。

直接上实例：

<form id="artCreateForm" action="{:U('artCreate')}" method="POST" enctype="multipart/form-data" class="form-horizontal" role="form">
    <input type="hidden" name="column_id" value="{$artColumn}">
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 标题 </label>
        <div class="col-sm-9">
            <input type="text" name="art_name" placeholder="标题" class="col-xs-10 col-sm-5 validate[required,maxSize[128]]" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 所属分类 </label>
        <div class="col-sm-9">
            <select name="art_category_id" id="art_category_id" class="">
                <option value="1">默认分类</option>
                <volist name="categoryList" id="vo">
                <option value="{$vo.cate_id}">{$vo.cate_name}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 摘要 </label>
        <div class="col-sm-9">
            <textarea class="form-control" name="art_summary" placeholder="摘要"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 缩略图 </label>
        <div class="col-sm-9">
            <input class="preview" type="file" name="art_thumb" value=""/>
            <img class="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 相关附件 </label>
        <div class="col-sm-9">
            <input type="file" name="art_upload_file" value=""/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 内容 </label>
        <div class="col-sm-9">
            <script type="text/plain" id="art_content" name="art_content" style="width:90%;height:240px;"></script>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 排序 </label>
        <div class="col-sm-9">
            <input type="text" name="art_order" value="0" placeholder="排序" class="col-xs-10 col-sm-5 validate[required,custom[integer]]" />
            <span class="help-inline col-xs-12 col-sm-7">
                <span class="middle">默认为0，数值越大越靠前</span>
            </span>    
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 点击次数 </label>
        <div class="col-sm-9">
            <input type="text" name="art_view_number" value="0" placeholder="点击次数" class="col-xs-10 col-sm-5 validate[required,custom[integer]]" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 发布时间 </label>
        <div class="col-sm-9">
            <input type="text" name="art_post_time" value="<?php echo date('Y-m-d H:i:s',time());?>" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
        </div>
    </div>
    <div class="clearfix form-actions">
        <div class="col-md-offset-3 col-md-9">
            <button class="btn btn-info" id="confirm" type="button">
                <i class="icon-ok bigger-110"></i>
                提交
            </button>
            &nbsp; &nbsp; &nbsp;
            <a class="btn" id="backid">
                <i class="icon-undo bigger-110"></i>
                返回列表
            </a>
        </div>
    </div>
</form>                                               
                                        
    <!-- 配置文件 -->
    <script type="text/javascript" src="/webui/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/webui/ueditor/ueditor.all.js"></script>
    <script>
        $(function () {
            var ue = UE.getEditor('art_content', {});
            /*返回列表*/
            $("#backid").on('click',function(){
                window.location.href="{:U('artList',array('column_id'=>$artColumn))}";
            });
            $('#confirm').on('click',function(){
                if(!$('#artCreateForm').validationEngine('validate')) return false;
                var $This = $(this);
                $This.attr('disabled','disabled');
                var formData = new FormData($("#artCreateForm")[0]);  
                var iUrl = '{:U('artCreate')}';
                $.ajax({
                    url: iUrl,
                    type: 'POST',
                    data: formData,
                    dataType: 'JSON',
                    cache: false,
                    processData: false,
                    contentType: false  
                }).done(function(ret){  
                    if(ret.code){  
                         sysTips(ret.info,1,function(){
                             location.href="{:U('artList',array('column_id'=>$artColumn))}";
                         });
                    }else{  
                        sysTips(ret.info,2); 
                    }
                });
                $This.removeAttr('disabled');
            });
        });
    </script>