diango框架下基于ajax实现照片上传

基于ajax实现照片上传

通过前端页面的上传按钮在后端得到文件（照片），将文件保存到特定的文件夹中并返回文件路径给前端。

---

<!-- 前端代码-->
<form name="regForm" id="regForm">
 <div class="form-group">
                      <label for="userPic">个人图像:</label>
                        <img src="" alt="图片" id="userImg" style="width: 75px;height: 100px;border: dashed 1px beige;" />
                      <input type="file" id="upload" name="upload">
                      <button type="button" class="btn btn-default" onclick="ajaxUploadFile()">上传</button>
                        <progress id="progress"></progress>
                      <input type="hidden" id="picPath" name="picPath"></div>
</form>

---

function  ajaxUploadFile(){
    //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
    var formData = new FormData($('#regForm')[0]);  // $('#regForm')[0] == document.getElementById('regForm')== document.forms[0] == document.regForm

    //ajax异步上传
    $.ajax({
        url: "/upload.do",
        type: "POST",
        data: formData,  // 1、json对象{}  2、json String 3、formData对象
        xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

            myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { //检查upload属性是否存在
                //绑定progress事件的回调函数   给<input type="file" name='upload' />
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr; //xhr对象返回给jQuery使用
        },
        success: function (result) {
            // result = JSON.parse(result);
            $("#userImg").attr("src", result.url); // 前端显示上传完成的图片
            document.regForm.picPath.value = result.url;
            // $("#result").html(result);
        },
        contentType: false, //必须false才会自动加上正确的Content-Type
        processData: false  //必须false才会避开jQuery对 formdata 的默认处理
    });
}

//上传进度回调函数：
function progressHandlingFunction(e) {
    if (e.lengthComputable) {
        $('#progress').attr({ value: e.loaded, max: e.total }); //更新数据到进度条
        var percent = e.loaded / e.total * 100;
        $('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");
        $('#progress').css('width', percent.toFixed(2) + "%");
    }
}

---

def uploadFile(request):
    # 后缀需要检查的
    file = request.FILES.get('upload')
    if file:
        try:
            with open(os.path.dirname(__file__) + os.sep + '..' + os.sep + 'static' + os.sep + 'uploads'+ os.sep + file.name,"wb+") as fp:
                for chunk in file.chunks():
                    fp.write(chunk)
                    pass
                  # 保存文件到uploads目录
        except Exception as e:
            return HttpResponse(json.dumps({'uploaded': 0, 'fileName': "", 'url': ""}),content_type="application/json")
            pass
        return HttpResponse(json.dumps({'uploaded': 1, 'fileName':file.name, 'url': os.sep + 'static' + os.sep + 'uploads'+ os.sep + file.name}),content_type="application/json")
    else:
        return HttpResponse(json.dumps({'uploaded': 0, 'fileName': "", 'url': ""}),content_type="application/json")
    pass

---

#urls.py中绑定path
from django.contrib import admin
from django.urls import path
from shopapp.views import *

urlpatterns = [ 
    path('upload.do', uploadFile),

]