使用 jquery.form.js插件上传带有附件的表单

使用 jquery.form.js插件上传带有附件的表单，附件可以是.txt，.xls，.csv。下面就介绍下可以上传文件的表单，并且限制上传文件的大小和类型。

1、准备工作：在html的标签里面引入jquery.js和jquery.form.js插件，必须先引入前者在引入后者，如下面所示：

2、html如下：

       

            

                
                     选择文件
                    
                
                支持文件格式：txt，xls，csv
            
            
        

3、js如下：

$(function(){
    var activity_id = sessionStorage.getItem('activity_id');
  
    // 点击上传按钮
    $('#upLoad').click(function(){
        $('#addForm').ajaxSubmit({
            forceSync: false,  
            url: 文件上传到服务器的路径,
            type: 'post',
            dataType: 'json',
            success: function(response){
                console.log('success');
            },
            error: function(response){
                console.log('error');
            }
        });
    });

    // 当type=file的input的value改变时触发下面函数
    $("#selectFile").on("change",function(){
        // var filePath = $(this).val();         //获取到input的value，里面是文件的路径
        var file = document.getElementById('selectFile').files;    //获取上传的文件
        var fileName = file[0].name;
        var fileSize = (file[0].size/1024).toFixed(2);
        // 获取文件的格式为.txt、.xsl、.csv
        var fileFormat = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
        if( checkFileFormat(fileFormat) == false){
            console.log("上传的文件类型有误！");
            return;
        }
        // 文件大小不超过200KB；
        if(fileSize > 200){
            console.log("上传的文件太大了！");
            return;
        }
        
    });

    // 校验文件格式
    function checkFileFormat(format) {
        if (format.match(/.txt|.xls|.csv/)) {
            return true;
        }
        return false;
    }
});

4、问题 ：按照上面js的写法，当文件上传成功，却总是进入ajaxSubmit()函数的error里面

5、原因：应该是dataType的原因，dataType为json，但是返回的data不是json格式

6、解决方法：将ajaxSubmit()方法里面的dataType去掉，上传文件成功，就回调ajaxSubmit()函数里面的success函数了。如下面所示：

$('#upLoad').click(function(){
        $('#addForm').ajaxSubmit({
            forceSync: false,  
            url: 文件上传到服务器的路径,
            type: 'post',
            //dataType: 'json',
            success: function(response){
                console.log('success');
            },
            error: function(response){
                console.log('error');
            }
        });
 });

7、ajaxSubmit()方法里面的success（response）里面的返回值是一个json的string类型，所以需要将response转换成json格式，利用eval()函数就可以达到这个功能。将点击上传按钮的js改成如下形式：

 // 点击上传按钮
    $('#upLoad').click(function(){
        $('#addForm').ajaxSubmit({
            forceSync: false,  
            url: globalConfig.pre_api_url + '/wxwall_api/cj/upload_names_file.php',
            type: 'post',
            // dataType: 'json',
            success: function(response){
                var obj = eval ("(" + response + ")");
                // 上传成功，显示抽奖人数
               consol.log(obj);  //obj就是json格式
            },
            error: function(response){
                console.log('error');
            }
        });
    });

8、按照上面的写法，将response转变成json，如果response里面包含的字段有status，msg，data，如果 msg是用中文写的，那么传回来之后是用unicode编码汉字，所以将response转换成json之后，在获取到msg之后，需要对它解码，如下面所示：

// 点击上传按钮
    $('#upLoad').click(function(){
        if( $('#selectFile').val() == '' ){
            error_prompt_alert('请先选择上传的文件！');
            return;
        }
        $('#addForm').ajaxSubmit({
            forceSync: false,  
            url: globalConfig.pre_api_url + '/wxwall_api/cj/upload_names_file.php',
            type: 'post',
            // dataType: 'json',
            success: function(response){
                // 将字符串解析成json对象
                var obj = eval ("(" + response + ")");
                var status = obj.status;
                var msg = obj.msg;
                var data = obj.data;
                msg =  decodeURI(msg)//将unicode编码转换成中文
                console.log(msg);
                
            },
            error: function(response){
                console.log('error');
            }
        });
    });