1秒消失 alert jquery_五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上

最新推荐文章于 2023-04-28 15:09:17 发布

weixin_39585070

最新推荐文章于 2023-04-28 15:09:17 发布

阅读量90

点赞数

文章标签： 1秒消失 alert jquery

本文链接：https://blog.csdn.net/weixin_39585070/article/details/112320967

版权

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

整体代码

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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload filetitle>
    
    <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 = '预览数据';
  if(data[0].constructor===Object){
    html+='\r\n';for(var item in data[0]){
      html+=''+item+'\r\n';
    }
    html+='\r\n';
    for(var row in data){
      html+='\r\n';for(var item in data[row]){
        html+=''+data[row][item]+'\r\n';
      }
      html+='\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

在该函数中，我们先把获取到的文件保持在对应的目录当中，然后返回给前端相关的消息即可，因为是测试程序，所以返回的消息默认设置为200了。

程序效果

下面我们来看下最终的效果吧

虽然说页面还很原始，但是我们想要的功能已经有了，在后面的文章中，我们就来探索下，如何来使用这些上传上来的数据吧！

原创不易，给个“在看”再走吧！

weixin_39585070

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1秒消失 alert jquery_五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上

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

扫一扫