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

最新推荐文章于 2024-04-24 01:04:30 发布

赏花赏景赏时光

最新推荐文章于 2024-04-24 01:04:30 发布

阅读量5.4k

点赞数 1

分类专栏： jquery 文章标签：使用 jquery.form.js插件上获取上传文件的大小获取上传文件的类型 js将unicode转成中文

本文链接：https://blog.csdn.net/tangxiujiang/article/details/78273526

版权

jquery 专栏收录该内容

27 篇文章 4 订阅

订阅专栏

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

赏花赏景赏时光

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用 jquery.form.js插件上传带有附件的表单

使用 jquery.form.js插件上传带有附件的表单，附件可以是.txt，.xls，.csv。下面就介绍下可以上传文件的表单，并且限制上传文件的大小和类型。1、准备工作：在html的&lt;head&gt;&lt;/head&gt;标签里面引入jquery.js和jquery.form.js插件，必须先引入前者在引入后者，如下面所示：&lt;script src="http://i.gtimg...
复制链接

扫一扫