今天分享一个动态上传数据的知识点，我们知道，传统的通过 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
在该函数中，我们先把获取到的文件保持在对应的目录当中，然后返回给前端相关的消息即可，因为是测试程序，所以返回的消息默认设置为200了。
程序效果
下面我们来看下最终的效果吧
虽然说页面还很原始，但是我们想要的功能已经有了，在后面的文章中，我们就来探索下，如何来使用这些上传上来的数据吧！
原创不易，给个“在看”再走吧！
