1. 程式人生 > >flask jQuery ajax 上傳文件

flask jQuery ajax 上傳文件

form als multipart enc fun art roc 路由 ajax

1、html 代碼

 <div>
        <form id="uploadForm" enctype="multipart/form-data" >
            <div>
                <input type="file" name="file" value="" style="color: white">
                <input type="button" value="上傳" id="upFileBtn">
            </div>
        </
form> </div>

註:1、html 部分主要是一個form表單,其中表單的enctype = "multipart/form-data" 必須要有。

  2、由於我的頁面背景顏色設置成黑色,所以字體顏色選了白色,這個無傷大雅。

var up_file = function () {
var formData = new FormData($(‘#uploadForm‘)[0]);
$.ajax({
    url:"/test/up_file",
    type: "POST",
    data: formData,
    async: true,
    cashe: 
false, contentType:false, processData:false, success:function (returndata) { alert(
returndata)
  },
  error:
function (returndata) {
     alert("上傳失敗!")

  })

註:如果要用ajax上傳文件,則要用FormData將文件轉化為FormData對象。

3、flask部分

@test.route(/up_file, methods=[GET, POST])
def up_file():
    
if request.method == "POST": file = request.files[file] # file_name = "test.csv" file_name = file.filename file.save(os.path.join(templates\\files, file_name)) return 上傳成功

註:1、本文沒有將藍本部分寫出來,相信路由的配置還是不難的。

  2、本代碼將文件存在服務器的templates下files文件夾中,可以直接給文件取個新名字,也可以用rerquest.files[‘file‘].filename獲取上傳文件時的名字。

flask jQuery ajax 上傳文件