自定义样式输入框 传递前端文件到后台

css部分

 .show_box{ width:90%; height: 500px;text-align: center;margin: 80px auto;border: 1px solid #f5f5f5; background: #f5f5f5;padding-top: 100px;}
 .show_box p{ width: 500px; height: 38px;line-height: 38px; border: 1px #ccc solid;background-color: ghostwhite;margin: 8px auto; }  
 .show_box .title{ margin-bottom: 30px;}
 .show_box .bt1{width: 640px; height: 46px;color: #ffffff;font-size: 20px;background-color: #5cacee;border: 1px solid #2aabd2;border-radius: 4px;margin-top:10px;margin-bottom:10px;}
 .show_box .bt2{ height: 28px;padding: 3px;margin-top: 10px;}

html部分

<div class="show_box">
	 <form  action="/index/" method="post" enctype="multipart/form-data">
       <h1 class="title">请上传您的音频文件</h1>
        <input type="button" class="bt1" value="选取文件"   onclick="getFile();">
        <p id="lb" ></p>
        <input style="display: none;"  type="file"  id="getF" name="file" onchange="clickF();">
        <input type="submit"  class="bt2"  id="bntSend"  value="确认提交"><br>
        <span id="msg" style="color: red;">{{ msg }}</span>
    </form>
 </div>

script 部分

 <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script>
        function getFile(){
            $("#getF").click();
        };
        var filename="";
        function clickF() {
            filename=$("#getF").val(); //获取文件的路径，file控件为保护文件，会生成一个假路径  C:\fakepath\导入.xlsx
            var filenames=filename.split("\\");  // 依据\ 进行切割
            filename =filenames[filenames.length-1]; //获取到文件名
            $("#lb").text(filename);
            console.log(filename);
        };
        $(function () {
            $('#bntSend').click(function () {
                $("#msg").text("正在加载测评中..."); //点击确认提交按钮，提示“正在加载测评中”
            })
        });
    </script>

后台

 file_obj = request.FILES.get("file")  # 获取到前端提交的文件
        # 将文件存入到本地目录data中， file_obj.name是要上传文件的文件名
        with open('data/' + file_obj.name, "wb") as f:
            for data in file_obj.chunks():
                f.write(data)

 # 获取各项值
  filenames = file_obj.name.split(".");  # 根据文件名中的. 进行分割，获取到没有带文件后缀的文件名
  name = filenames[0]  # 文件名