关于jquery.form.js上传文件的一些记录

插件:jquery.form.js 上传文件。

<input type="file" name="file" class="layui-upload-file" placeholder="上传文件">

js:

$('input').change(function(){
    console.log($(this).val());    //获取文件名
    console.log(this.files[0]);   //获取的比较详细,包括文件类型,大小...
});

获取文件后缀名:

var fileType = 文件名.substring(文件名.lastIndexOf(".") + 1); //获取文件后缀名

校验上传格式,以图片为例:

$('input').change(function(){
    var fileName = $(this).val();
    if(!fileName){
        return;
    }
    if(!RegExp('^.*?\.(jpg|png|gif|bmp|jpeg)$', 'i').test(fileName)){
        alert('不支持该格式');
        return;
    }
    console.log('成功');
});

一、jQuery.Form.js 配置选项options

选项说明
url表单提交数据的地址
typeform提交的方式(method:post/get)
target服务器返回的响应数据显示在元素(Id)号
beforeSerialize: function($form, options)表单数据被序列化之前执行的回调函数,如果在内部return false将终止序列化和提交。
beforeSubmit: function(arr, $form, options)表单数据被序列化成arr数组,并且在提交前触发的回调函数。
error提交失败执行的回调函数
success提交成功后执行的回调函数
data除了表单数据外,还需要额外提交到服务器的数据
iframe如果有<input type="file">是否应该使用iframe来上传文件(对旧版本浏览器而言)
iframeSrc为<iframe>元素设定src属性值
iframeTarget如果你想用自己的iframe来上传文件,可以将Id传给这个属性
dataType期望服务器返回数据类型
clearForm提交成功后是否清空表单中的字段值
restForm提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
timeout设置请求时间,超过该时间后,自动退出请求,单位(毫秒)
forceSync
semantic
uploadProgress

二、API

ajaxForm增加所有需要的事件监听器,为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备。接受0个或1个参数。参数可以是一个回调函数,也可以是一个Options对象。$("#formid").ajaxForm();
ajaxSubmit使用ajax提交表单。接受0个或1个参数。参数可以是一个回调函数,也可以是一个Options对象。

$("#formid").ajaxSubmit();

$("#formid").submit(function(){

$(this).ajaxSubmit();

return false;

});

formSerialize将表单串行化(或序列化)为一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。$("#formid").formSerialize();
fieldSerialize将表单的字段元素串行化(或序列化)为一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,使用这个就很方便了。返回以下格式的字符串:name=value1&name2=value2。$("#formid .specialFields").fieldSerialize();
fieldValue返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效,则数组为空。$("#formid :password").fieldValue();
resetForm将表单恢复到初始状态。$("#formid").resetForm();
clearForm清除表单元素。该方法将所有的text、password、textarea置空,清除select元素中的选定,以及所有radio按钮和checkbox按钮重置为非选定状态。$("#formid").clearForm();
clearFields清除字段元素。只有部分表单元素需要清除时方便使用。$("#formid .specialFields").clearFields();