form表单通过ajax提交文件

日期:2019-12-04编辑作者:澳门金莎娱乐手机版

前面分享了用js将json数据下载为csv文件,方便后期管理。但是对于测试人员更希望能够以页面的形式展现任务,所以就做了一个将csv文件展现在页面上的例子。

例子:在页面上传一个csv文件,web服务器端用php解析上传的csv文件并入库
前端页面代码:

复制代码 代码如下:

<form enctype="multipart/form-data">
    <p>上传csv文件<input type="file" id="csv_file" name="csv_file"/></p>
    <button id="import">导入</button>
</form>
<script type="application/javascript">
    $("#import").click(function () {
        var files = $('#csv_file').prop('files');
        var data = new FormData();
        data.append('csv_file', files[0]);

        $.ajax({
            type: 'POST',
            url: "http://xxxx/import_csv",
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            success: function (ret) {
                alert(ret);
            }
        });
    });
</script>

csv

form的enctype必须是multipart/form-data才可以上传多个文件,ajax通过FormData来上传数据,ajax的cache、processData、contentType均要设置为false。
澳门金莎娱乐手机版 ,cache设为false是为了兼容ie8,防止ie8之前版本缓存get请求的处理方式。
contentType设置为false原因:https://segmentfault.com/a/1190000007207128。
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

CSV转JSON
Vehicle Date Location Speed

php代码:

注意:上面的例子需要服务环境

        $uploadFile = $_FILES['csv_file'];
        $fileName = $uploadFile['tmp_name'];
        $fHandle = fopen($fileName, 'r');
        while ($data = fgetcsv($fHandle)) {
            //入库处理
        }
        fclose($fHandle);

php通过$_FILES读取上传的文件,通过tmp_name可以获取上传文件路径,通过fgetcsv函数读取csv文件数据。

本文由澳门金莎娱乐网站发布于澳门金莎娱乐手机版,转载请注明出处:form表单通过ajax提交文件

关键词:

方法_基础知识_脚本之家,Math对象有关方法以及

JavaScript Math.floor 方法 Math.floor方法用于对数值向下取整,即获取小于或等于该数值的最大整数。语法如下: num++(后...

详细>>

澳门金莎娱乐手机版:所有的数据都在一个单元

摘要:最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护。但是开发时,分工安排都是以...

详细>>

cookie用法解析,方法的使用

jquery.cookie.js是一个轻量级的cookie插件,可以读取、写入、删除cookie。 jquery.cookie() 方法的使用(读取、写入、删除) j...

详细>>

in锚点的动态创建,收集整理的四个方向的滚动

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 向左滚动 测试状态栏字符的滚动 JavaScript 无缝左右滚动加定高定宽停...

详细>>