五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上

2022-05-21 510

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 今天分享一个动态上传数据的知识点，我们知道，传统的通过 form 来上传文件，会导致 web 页面重新刷新，这样有些功能就无法实现了，比如说我当前页面存在某些表单，如果页面刷新，那么已经填写的表单就会丢失甚至重复提交等等问题。而 JQuery 可以很好的帮我们动态更新页面，实现不刷新页面就可以上传文件的功能，一起来看吧！

整体代码

首先构造一个用于测试的页面，其简单的 HTML 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload file</title>
    <!-- 引入 jquery.js -->
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<input type="file" name="file" id="file">
<input type="submit" id="_submit" value="Upload" onclick="postData();">
</div>
<div>
    <table border="1" id="theResult" cellpadding="10">
    </table>
</div>
</body>
<script src="/static/upload.js"></script>
<script src="/static/csvtoObjects.js"></script>
</html>

可以看到页面布局很简单，只有两个 div，一个就是用于上传文件的两个 input 控件，另一个则是一个空的 table，我们后面用来展示文件内容

接下来我们再来看看 upload.js 文件，这是我们主要的 js 代码所在

function postData(){
    var formData = new FormData();
    formData.append("file", $("#file")[0].files[0]);
    $.ajax({
        url:'http://127.0.0.1:5000/upload/', /*接口域名地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            if(res.data["code"]=="succ"){
                // alert('成功');
                preData();
            }else if(res.data["code"]=="err"){
                alert('失败');
            }else{
                console.log(res);
            }
        }
    })
}
function preData(){
    $.get('http://127.0.0.1:5000/static/uploads/data.csv', function(theData){
    var csvdata=toObjects(theData);
    var theHtml=createTable(csvdata);
    $('#theResult').html(theHtml);
  })
}
function createTable(data){
  var html='';
  var caption_str = '<caption>预览数据</caption>';
  if(data[0].constructor===Object){
    html+='<tr>\r\n';
    for(var item in data[0]){
      html+='<th>'+item+'</th>\r\n';
    }
    html+='</tr>\r\n';
    for(var row in data){
      html+='<tr>\r\n';
      for(var item in data[row]){
        html+='<td>'+data[row][item]+'</td>\r\n';
      }
      html+='</tr>\r\n';
    }
  }
  return caption_str + html;
}

首先就是函数 postData，这个函数是用来上传文件的，注意到，如果文件上传成功，就会调用另一个函数 preData

这个函数是预览文件数据的入口函数，通过 JQuery 的 get 函数来获取本地的 csv 文件，然后转换格式为 Objects，再传递给函数 createTable，然后 createTable 函数整理相关的 HTML 代码，这样就可以展示在页面上了

最后我们再看下 Flask 当中的路由函数

@app.route('/upload/', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        f = request.files['file']
        basepath = os.path.dirname(__file__)  # 当前文件所在路径
        upload_path = os.path.join(basepath, r'static\uploads', secure_filename(f.filename))
        f.save(upload_path)
        return jsonify({'data': {'code': 'succ'}}), 200