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>
<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>
