El proyecto Django agrega la función de carga de imágenes

El primer paso es agregar lo siguiente a settings.py:

MEDIA_URL = ' / media / ' 
MEDIA_ROOT = os.path.join (BASE_DIR, ' media ' )

El segundo paso es agregar la siguiente función en la vista de vista (la función encapsulada es tranquila, puede ver otro artículo para ver el contenido)

@require_POST
 def upload (request): 
    file = request.FILES.get ( ' file ' ) 
    name = file.name 
    with open (os.path.join (settings.MEDIA_ROOT, name), ' wb ' ) as f:
         for chunk en file.chunks (): 
            f.write (chunk) 
    url = request.build_absolute_uri (settings.MEDIA_URL + name)
     return restful.result (data = { ' url ' : url})

El tercer paso es escribir ajax.js para enviar la imagen al fondo a través de ajax. Cabe señalar aquí que la imagen debe estar encapsulada por la función formData, y deben agregarse dos parámetros adicionales (process y contentType) al enviar la solicitud posterior.

función Banners () {
     var self = this ; 
    self.counts = $ ('. loop-img' ) .length; 

} 

// cms 后台 管理 系统 修改 轮 播 图片 
Banners.prototype.addbanners = function () {
     var self = this ;
    var addBtn = $ ('. cms-header .button button' ); 
    addBtn.click ( function () { 
        console.log (self.counts); 
        var tpl = template ('add-banners', {' count ' : self.counts});
         var bannerGrouplist = $ ('. row' ); 
        bannerGrouplist.prepend (tpl);
        var bannerItem = bannerGrouplist.find ('. loop-img: first' ); 
        self.addimg (bannerItem); 
        cuenta propia + = 1 ; 
    }); 
}; 
// 点击 添加 图片 按钮 事件 
Banners.prototype.addimg = function (bannerItem) {
     var inputimg = bannerItem.find ('img' );
    var self = esto ; 
    inputimg.click ( function () {
         var inputimage = $ ( this ) .parent (). siblings ('# addimg' ); 
        inputimage.click (); 
        inputimage.change ( function () {
            archivo var = this .files [0 ];
            var formdata = new FormData (); 
            formdata.append ( 'archivo' , archivo); 
            $ .post ({
                 'url': '/ cms / upload /' ,
                 'data' : formdata,
                 'processData': false ,
                 'contentType': false ,
                 'success': function (result) {
                     if (result.code = == 200 ) {
                         var url =  result.data.url;
                        console.log ($ (esto )); 
                        inputimg.attr ( 'src' , url); 
                    } 
                } 
            }) 
        }) 
    }); 


}; 


Banners.prototype.run = function () {
     this .addbanners (); 
}; 

$ ( function () {
     var banners = nuevos Banners (); 
    banners.run (); 
});

Un ejemplo de los resultados es el siguiente: