慕學在線--4、知識點二

九、用戶文件上傳下載

(一)、後臺數據庫上傳文件

  1. 設置上傳文件的上傳位置,settings.py 中設置

    MEDIA_URL = '/media/'  # MEDIA_URL是指從瀏覽器訪問時的地址前綴
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 上傳文件保存的根目錄
  2. 上下文處理說明,settings.py 中設置

    TEMPLATES = [
    ......
            'OPTIONS': {
                'context_processors': [
    ......
                    'django.core.context_processors.media',
    ......
  3. 上傳文件訪問url設置,urls.py中設置

    from django.views.static import serve
    from mxonline2.settings import MEDIA_ROOT
    
    urlpatterns = [
    ......
        # 配置上傳文件的訪問處理函數
        url(r'^media/(?P<path>.*)$',serve,{"document_root":MEDIA_ROOT})
    ......
    ]
  4. html文件中訪問

    <img  data-url="{{ MEDIA_URL }}{{ org.image}} />  # org指的是一個對象的實例

(二)、用戶上傳文件

  1. 定義modelform

    class UploadImageModelForm(forms.ModelForm):  #定義modelform
        class Meta:
            model=UserProfile
            fields=['image',]
  2. url配置

    
    # 修改頭像
    
    url(r'^upload/image/$', UploadImageView.as_view(), name='upload_image'),
  3. 定義View

    class UploadImageView(LoginRequiredMixin,View):
        def post(self,request):
    
    # 上傳文件必須傳request.FILES參數,instance保證modelform.save()時,是進行update()
    
            image_form =  UploadImageModelForm(request.POST,request.FILES,instance=request.user) 
            if image_form.is_valid():
                image_form.save()   # 會調用model.save()方法
                return HttpResponse(json.dumps({'status': 'success'}), content_type='application/json')
            return HttpResponse(json.dumps({'status': 'fail'}), content_type='application/json')
    
            # 另外一種更改數據庫圖像的方法
            # image_form = UploadImageModelForm(request.POST,request.FILES)  # 不上傳instance實例 
            # if image_form.is_valid():
            #     image=image_form.cleaned_data['image']
            #     request.user.image=image
            #     request.user.save()
  4. html文件(form表單)

    <form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off"
          method="post" action="{% url 'user_center:upload_image' %}" target='frameFile'>
        <label class="changearea" for="avatarUp">
            <span id="avatardiv" class="pic">
                <img width="100" height="100" class="js-img-show" id="avatarShow"
                     src="{{ MEDIA_URL }}{{ user.image }}"/>
            </span>
            <span class="fl upload-inp-box" style="margin-left:70px;">
                <span class="button btn-green btn-w100" id="jsAvatarBtn">修改頭像</span>
                <input type="file" name="image" id="avatarUp" class="js-img-up"/>
            </span>
        </label>
        {% csrf_token %}
    </form>

(三)、用戶下載資料

<li>
       <span><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
             <a href="{{ MEDIA_URL }}{{ resource.resource_file }}"       #  鏈接文件的路徑,
              class="downcode" target="_blank" download="" data-id="274"  title="">下載</a>
</li>

十、xadmin集成富文本編輯器

參考網址:https://github.com/zhangfisher/DjangoUeditor

一、安裝
1. pip install DjangoUeditor 或者運行:python setup.py install 方法安裝。但可能會出現各種問題,建議直接將原碼複製到項目的方法安裝
2. 在Django中安裝DjangoUeditor 在INSTALL_APPS裏面增加DjangoUeditor app,如下: INSTALLED_APPS = ( #…….. ‘DjangoUeditor’, )
3. 配置urls url(r’^ueditor/’,include(‘DjangoUeditor.urls’ )),
4. 在models中的使用:

from DjangoUeditor.models import UEditorField
class Blog(models.Model):
    Name=models.CharField(,max_length=100,blank=True)
    Content=UEditorField(u'內容   ',width=600, height=300, toolbars="full", imagePath="", filePath="", upload_settings={"imageMaxSize":1204000},
             settings={},command=None,event_handler=myEventHander(),blank=True)    # 部分參數可以省略,imagePath\filePath需要配置

二、xadmin文件包中配置

  1. /xadmin/plugins/文件夾下添加 ueditor.py文件

    
    # -*- coding: utf-8 -*-
    
    
    import xadmin
    from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
    from DjangoUeditor.models import UEditorField
    from DjangoUeditor.widgets import UEditorWidget
    from django.conf import settings
    
    class XadminUEditorWidget(UEditorWidget):
        def __init__(self,**kwargs):
            self.ueditor_options=kwargs
            self.Media.js = None
            super(XadminUEditorWidget,self).__init__(kwargs)
    
    class UeditorPlugin(BaseAdminPlugin):
        def get_field_style(self, attrs, db_field, style, **kwargs):
            if style == 'ueditor':
                if isinstance(db_field, UEditorField):
                    widget = db_field.formfield().widget
                    param = {}
                    param.update(widget.ueditor_settings)
                    param.update(widget.attrs)
                    return {'widget': XadminUEditorWidget(**param)}
            return attrs
    
        def block_extrahead(self, context, nodes):
            js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")         #自己的靜態目錄
            js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js")   #自己的靜態目錄
            nodes.append(js)
    
    xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
    xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
  2. 在/xadmin/plugins/init()內添加

    PLUGINS = (
    ......
    'ueditor'   # 與ueditor.py文件名保持一致
    )

三、在adminx.py相應的類中添加,如:

class CourseAdmin(object):
.....
style_fields={'detail':'ueditor'}

四、前端頁面使用
出於安全的考慮,django默認將html代碼轉意爲字符文本,而ueditor字段,按照html代碼存在數據庫
如:course-detail.html文件中,

......
{% autoescape off %}   
{{ course.detail }}
{% endautoescape %}
......

十一、excel導入插件製作

插件製作文檔:https://xadmin.readthedocs.io/en/latest/make_plugin.html
一、xadmin中添加插件文件excel.py
xadmin/plugins/excel.py

# coding:utf-8

import xadmin
from xadmin.views import BaseAdminPlugin, ListAdminView
from django.template import loader

#excel 導入
class ListImportExcelPlugin(BaseAdminPlugin):
    import_excel = False

    def init_request(self, *args, **kwargs):
        return bool(self.import_excel)

    def block_top_toolbar(self, context, nodes):  # top_toolbar 爲插入點名稱
        nodes.append(loader.render_to_string('xadmin/excel/model_list.top_toolbar.import.html', context_instance=context))

xadmin.site.register_plugin(ListImportExcelPlugin, ListAdminView)

二、xadmin中添加html模板文件

xadmin/templates/xadmin/excel/model_list.top_toobar.import.html

{% load i18n %}
<div class="btn-group export">
  <a class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown" href="#">
    <i class="icon-share"></i> 導入 <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><a data-toggle="modal" data-target="#export-modal-import-excel"><i class="icon-circle-arrow-down"></i> 導入 Excel</a></li>
  </ul>
    <script>
        function fileChange(target){
//檢測上傳文件的類型
            var imgName = document.all.submit_upload.value;
            var ext,idx;
            if (imgName == ''){
                document.all.submit_upload_b.disabled=true;
                alert("請選擇需要上傳的 xls 文件!");
                return;
            } else {
                idx = imgName.lastIndexOf(".");
                if (idx != -1){
                    ext = imgName.substr(idx+1).toUpperCase();
                    ext = ext.toLowerCase( );
{#                    alert("ext="+ext);#}
                    if (ext != 'xls' && ext != 'xlsx'){
                        document.all.submit_upload_b.disabled=true;
                        alert("只能上傳 .xls 類型的文件!");

                        return;
                    }
                } else {
                    document.all.submit_upload_b.disabled=true;
                    alert("只能上傳 .xls 類型的文件!");
                    return;
                }
            }

        }
    </script>
    <div id="export-modal-import-excel" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <form method="post" action="" enctype="multipart/form-data">
              {% csrf_token %}
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">導入 Excel</h4>
          </div>
          <div class="modal-body">
               <input type="file" onchange="fileChange(this)" name="excel" id="submit_upload">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            <button class="btn btn-success" type="submit" id="submit_upload_b"><i class="icon-share"></i> 導入</button>
          </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dalog -->
    </div><!-- /.modal -->

</div>

三、在/xadmin/plugins/_init_()內添加

PLUGINS = (
......
'excel'   # 與excel.py文件名保持一致
)

四、將插件引入到頁面,並重載post函數,如:
courses\adminx.py

class CourseAdmin(object):
......
import_excel=True    # 引入插件的判斷
......
    def post(self, request, *args, **kwargs):
        if 'excel' in request.FILES:
            # 寫自己的邏輯,以下爲網絡摘抄,未經驗證
         wb = xlrd.open_workbook(filename=None, file_contents=request.FILES['excel'].read())
            table = wb.sheets()[0]
            row = table.nrows
            sql_list = []
            org_id_list = []
            for i in xrange(1,row):
                col = table.row_values(i)
                sql = Course(     # 此處不應該寫死,容易導入錯誤,應能自動識別相關順序 
                    degree=col[0],
                    learn_time=col[1],
                    detail=col[2],
                    desc=col[3],
                    students=col[4],
                    fav_nums=col[5],
                    name=col[6],
                    image=col[7],
                    click_nums=col[8],
                    course_org_id=col[10],
                    category=col[11],
                    tag=col[12],
                    teacher_id=col[13],
                    learn_what=col[14],
                    need_know=col[15],
                    notice=col[16],
                    is_banner=col[17],
                )
                sql_list.append(sql)
                org_id_list.append(col[10])
            Course.objects.bulk_create(sql_list)

            #更新excel文件中機構包含的課程數
            for id in org_id_list:
                org = CourseOrg.objects.get(id=int(id))
                org_course_nums = org.course_set.all().count()
                org.course_nums = org_course_nums
                org.save()
 # 調用父類的post
        return super(CourseAdmin, self).post(request, args, kwargs) 
發佈了40 篇原創文章 · 獲贊 6 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章