jquery ajax上传文件

作者: ShutLove | 来源:发表于2018-01-04 23:42 被阅读75次

    例子:在页面上传一个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>
    

    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。

    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文件数据

    相关文章

      网友评论

      本文标题:jquery ajax上传文件

      本文链接:https://www.haomeiwen.com/subject/nuodnxtx.html