基于ajax的图片上传

基于ajax的图片上传

前端代码

<!--HTML部分-->
<div class="form-group">
    <label for="thumbnail-form">缩略图</label>
    <div class="input-group">
        <input type="text" class="form-control" id="thumbnail-form" name="thumbnail" placeholder="缩略图">
        <!--关键部分 span里面套了个label和input,为了样式好看特意把input隐藏-->
        <span class="input-group-btn">
            <label class="btn btn-file btn-default">上传图片
                <input id="thumbnail-btn" hidden type="file" class="btn btn-default">
            </label>
        </span>
    </div>
</div>

// js代码部分 图片上传,一脸懵逼
News.prototype.lisntenUploadFileEvent = function(){
    var thumbnailBtn = $('#thumbnail-btn');
    thumbnailBtn.change(function () {
        var file = thumbnailBtn[0].files[0];
        var csrf_value = $("[name='csrfmiddlewaretoken']").val();
        var formData = new FormData();
        formData.append('file',file);
        formData.append('csrfmiddlewaretoken',csrf_value);
        $.ajax({
            url:'/cms/upload_file/',
            type:'post',
            data:formData,
            processData:false,
            contentType:false,
            success:function (result) {
                if(result['code']===200){
                    console.log(result['data']);
                    var url = result['data']['url'];
                    var thumbnailInput = $('#thumbnail-form');
                    thumbnailInput.val(url)
                }
            }
        })
    });
};

后端代码

# views部分
@require_POST
def upload_file(request):
    file = request.FILES.get('file')
    name = file.name
    with open(os.path.join(settings.MEDIA_URL,settings.MEDIA_ROOT,name),'wb') as fp:
        for chunk in file.chunks():
            fp.write(chunk)
    # 集成了http://127.0.0.1:8000
    url = request.build_absolute_uri(settings.MEDIA_URL+name)
    return restful.result(data={'url':url})

# app中的url部分
app_name = 'cms'
urlpatterns = [
    path('upload_file/',views.upload_file,name='upload_file'),
]

# settings部分 制定上传文件到本服务器的哪里
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

# 主url部分
from django.conf import settings
urlpatterns = [
	...
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)