html表單：

<div style="width:100px;float:left;margin-left:35px;">
        <form method="post" enctype="multipart/form-data" id="test_form" style="margin-top:45px;">
             <a href="javascript:;" class="file button red">選擇照片
             <input type="file" name="photo" id="photo">
              </a>
             <a type="button" class="file button red" id="tj" onclick="ajaxForm()">上傳照片</a>
             <a class="file button red" data-reveal-id="myModal">手動裁剪</a>
        </form>
 </div>
 

Js程式碼：

function ajaxForm(){
        var form= new FormData(document.getElementById("test_form"));
        $.ajax({
            url:"{{ url_for('api_upload') }}",
            type:"post",
            data:form,
            dataType: 'json',
            processData:false,
            contentType:false,
            success:function(data){
                    $(img_url_new).attr("src",data.img_url_new);
                    $(imgPic).attr("src",data.img_url_new);
            },
            error:function(e){
                    alert("error");
            }
        })
}
 

@app.route('/up_photo', methods=['POST'], strict_slashes=False)
def api_upload():
    file_dir = os.path.join(basedir, app.config['UPLOAD_FOLDER'])
    if not os.path.exists(file_dir):
        os.makedirs(file_dir)
    f = request.files['photo']
    if f and allowed_file(f.filename):
        fname = secure_filename(f.filename)
        ext = fname.rsplit('.', 1)[1]
        new_filename = Pic_str().create_uuid() + '.' + ext
        print new_filename
        f.save(os.path.join(file_dir, new_filename))
        img_url = ip+'show/'+new_filename
        img_url_new = ip+'show/'+new_filename  #處理後的圖片，假資料

        return jsonify({"success": 200, "msg": "上傳成功", "img_url": img_url, "img_url_new": img_url_new})
    else:
        return jsonify({"error": 1001, "msg": "上傳失敗"})
 

<div id="myModal" class="reveal-modal">
            <h1>點選選擇裁剪座標</h1>
            <div class="uploader blue">
                <img id="imgPic" src="{{ url_for('static', filename='img/1.jpg') }}" onclick="Show(this)" style="width:300px;height:270px;"/>
                X:<input id="xxx" type="text" style="width:30px;"/>  Y:<input id="yyy" type="text" style="width:30px;"/>
            </div>
            <a class="close-reveal-modal">×</a>
 </div>

js程式碼：

<!--獲取圖片座標-->
    function mousePosition(ev){
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
      }
      return {
       x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
       y:ev.clientY + document.body.scrollTop  - document.body.clientTop
       };
    }
    function mouseMove(ev){
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
    }
    document.onmousemove = mouseMove;
      function Show(el){
          var x = parseInt(document.getElementById('xxx').value)-el.offsetLeft;
          var y = parseInt(document.getElementById('yyy').value)-el.offsetTop;
          var data= {
                data: JSON.stringify({
                    'x': x,
                    'y': y
                }),
            }
          $.ajax({
            url:"{{ url_for('img_operate') }}",
            type:"post",
            data:data,
            dataType: 'json',
            success:function(data){
                 //成功後的一些操作

            },
            error:function(e){
                 alert("error");
            }
        })
   }

var data= {
                data: JSON.stringify({
                    'x': x,
                    'y': y
                }),
            }

data = json.loads(request.form.get('data'))
    x = data['x']
    y = data['y']

# 座標操作圖片處理的按鈕路由
@app.route('/img_operate', methods=['POST'])
def img_operate():
    data = json.loads(request.form.get('data'))
    x = data['x']
    y = data['y']
    print(x)
    print(y)
    img = 'http://localhost:5000/static/img/1.jpg'
    return jsonify({"success": 200, "img": img, "x": x, "y": y})