Ajax+Python flask实现上传文件功能

<div  >
       <input type="file" name="FileUpload" id="FileUpload">
       <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a>
</div>

<script type="text/jscript">
 
       $(function () {
           $("#btn_uploadimg").click(function () {
               var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
               if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                   alert("请选择图片");
                   return;
               }
               var formFile = new FormData();
               formFile.append("action","UploadVMKImagePath");  
               formFile.append("file",fileObj); //加入文件对象
 
               //第一种  XMLHttpRequest 对象
               //var xhr = new XMLHttpRequest();
               //xhr.open("post","/Admin/Ajax/VMKHandler.ashx",true);
               //xhr.onload = function () {
               //    alert("上传完成!");
               //};
               //xhr.send(formFile);
 
               //第二种 ajax 提交
 
               var data = formFile;
               $.ajax({
                   url: "/upload/",data: data,type: "Post",dataType: "json",cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false,//必须
                   success: function (result) {
                       alert("上传完成!");
                   },})
           })
       })
 
   </script>

from flask import Flask,render_template,request,redirect,url_for
from werkzeug.utils import secure_filename
import os
from flask import send_from_directory
from werkzeug import SharedDataMiddleware

UPLOAD_FOLDER = ‘/uploads‘  #文件存放路径
ALLOWED_EXTENSIONS = set([‘jpg‘]) #限制上传文件格式

app = Flask(__name__)
app.config[‘UPLOAD_FOLDER‘] = UPLOAD_FOLDER
app.config[‘MAX_CONTENT_LENGTH‘] = 5 * 1024 * 1024

def allowed_file(filename):
return ‘.‘ in filename and 
           filename.rsplit(‘.‘,1)[1].lower() in ALLOWED_EXTENSIONS

@app.route(‘/upload/‘,methods=[‘GET‘,‘POST‘])
def upload_file():
    if request.method == ‘POST‘:
        # check if the post request has the file part
        if ‘file‘ not in request.files:
            flash(‘No file part‘)
            return redirect(request.url)
        file = request.files[‘file‘]
        # if user does not select file,browser also
        # submit an empty part without filename
        if file.filename == ‘‘:
            flash(‘No selected file‘)
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config[‘UPLOAD_FOLDER‘],filename))
            return  ‘{"filename":"%s"}‘ % filename
    return ‘‘

<div class="divcenter" style="width:1025px">
            <div style="width:100%;height:600px">
                <div id="div_torrent" style="overflow:hidden">
                    <a id="btn_file" href="javascript:;" class="file" style="margin-top:5px;margin-bottom:5px;float:left;">选择文件
                       <input type="file" name="FileUpload" id="FileUpload" accept=".torrent">
                    </a>
                    <div id="showFileName" style="float:left;margin-top:7px;margin-bottom:5px;"></div>
                    <input id="btn_upload" type="button" value="上传" onclick="onsubmit" class="file" style="float:right;width:65px; height: 33px;left: 4px;background-color:rgba(255,206,68,0.6);cursor:hand;margin-top:5px;margin-bottom:5px;margin-right:5px;border-color:red" />
                </div>
            </div>
    </div>

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

<script type="text/jscript">
       $(function () {
                $("#btn_file").on("change","input[type=‘file‘]",function(){
                    var filePath=$(this).val();
                    if(filePath.indexOf("torrent")!=-1){
                        var arr=filePath.split(‘‘);
                        var fileName=arr[arr.length-1];
                        $("#showFileName").html(fileName);

                    }else{
                        $("#showFileName").html("");
                        }
                   })
                })
    </script>

<script type="text/jscript">

       $(function () {
           $("#btn_upload").click(function () {
               var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
               if (typeof (fileObj) == "undefined" || fileObj.size <= 0|| $("#showFileName").html()=="") {
                   alert("请选择BT种子");
                   return;
               }if(fileObj.size>5242880)
               {
                    alert("BT种子限制最大 5Mb");
                    return;
               }
               var formFile = new FormData();
               formFile.append("action","UploadTorrentPath");
               formFile.append("file",fileObj); //加入文件对象

               //第一种  XMLHttpRequest 对象
               //var xhr = new XMLHttpRequest();
               //xhr.open("post",true);
               //xhr.onload = function () {
               //    alert("上传完成!");
               //};
               //xhr.send(formFile);

               //第二种 ajax 提交

               var data = formFile;
               $.ajax({
                   url: "/upload/",type: "Post",dataType: "json",cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false,//必须
                   success: function (result) {
                       alert("上传完成!");
                   },error: function (xmlrequest,textStatus,errorThrown) {
                        alert("上传失败!");
                    //alert("error:" + textStatus + errorThrown + ":" + JSON.stringify(xmlrequest));
                    console.log("error:" + textStatus + errorThrown + ":" + JSON.stringify(xmlrequest));
                }
               })
           })
       })

   </script>