JQuery異步post上傳表單數據標準化模板
HTML代碼:
<form id="form" enctype="multipart/form-data" method="post" > <input type="file" name="file1" id="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"><br> <input type="text" name="l1" id="" value="1"><br> <input type="number" name="l2" id="" value="2"><br> <input type="checkbox" name="l3" id="" ><br> <input type="submit" value="上傳數據"> </form>
jquery代碼:
$("#form").submit(function (e) { e.preventDefault();//阻止表單刷新,也可以函數最後加上 return false; var formData = new FormData($("#form")[0]);//formData對象實例化的參數必須為DOM,加上[0]jquery對象轉為dom對象 $.ajax({ url:"http://0.0.0.1/api", /*接口域名地址*/ type:'post', data: formData, contentType: false, processData: false, //如果是跨域請求,請加上下面四行 //xhrFields: { // withCredentials: true //}, //crossDomain: true, success:function(res){ console.log(res); //根據返回的JSON格式數據判斷數據傳輸狀態,這個看後端返回的啥數據,沒有標準。 // if(res.data["code"]=="succ"){ // alert('成功'); // }else if(res.data["code"]=="err"){ // alert('失敗'); // }else{ // console.log(res); // } }, error:function(error){ console.log(error); } }) });
後端Flask數據處理:
@app.route('/api',methods=['GET','POST']) def api(): # for item in request.form: # print(item) d1 = request.form.get("l1") d2 = request.form.get("l2") d3 = request.form.get("l3") file = request.files.get('file') print(file) dict = {"code":"200","data":"處理完畢"} return jsonify(dict)
到此這篇關於JQuery異步post上傳表單數據標準化模板的文章就介紹到這瞭,更多相關JQuery異步post上傳表單數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Jquery實現異步上傳文件
- 使用AJAX實現上傳文件
- vue項目中form data形式傳參方式
- js前端上傳文件縮略圖技巧示例詳解
- 解析element-ui中upload組件傳遞文件及其他參數的問題