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

来源：互联网发布：免费手机文字扫描软件编辑：程序博客网时间：2024/05/22 00:45

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

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

<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script><script src='https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js'></script>

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

阅读全文

0 0