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

Bertha 。 2022-06-07 10:23 176阅读 0赞

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

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

2、html如下：

<form enctype="multipart/form-data" method="post" id='addForm'>
                <div id="filePanel">
                    <a class="selectFileDiv" href="javascript:;">
                         选择文件
                        <input type="file" name="file" id="selectFile">
                    </a>
                    <span id="fileNameOrFileFormat">支持文件格式：txt，xls，csv</span>
                </div>
                <input type='button' id="upLoad" class="btn customButton" value='上传' name="上传" />
            </form>

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');
                }
            });
        });