Django + layui 简单实现图片上传

Html:

<form class="form-horizontal" id="addForm" method="post" enctype ="multipart/form-data">
   {% csrf_token %}
   <input type="hidden" name='id' value="{{ conf.id }}" />
   <div class="box-body">
         <fieldset id="InputsWrapper">
           <legend>
             <h4>参数信息</h4>
           </legend>
            <div class="form-group has-feedback">
               <label class="col-sm-2 control-label">中间件名称</label>
               <div class="col-sm-4">
                   <input class="form-control" name="middleware" type="text" value="{{ res.middleware }}"/>
               </div>
            </div>
           <div class="form-group has-feedback">
               <label class="col-sm-2 control-label">中间件图标</label>
               <div class="col-sm-4">
                   <div class="input-group file-caption-main">
                         <input class="form-control" id="filename"  type="text" />

                     <div class="input-group-btn input-group-append">
                         <div tabindex="500" class="btn btn-primary btn-file">
                             <i class="glyphicon glyphicon-folder-open"></i>&nbsp;
                             <span class="hidden-xs">选择 …</span>
                             <input id="input-b9" name="middleware_img" type="file" >
                         </div>
                     </div>
                   </div>
               </div>
           </div>
             <div class="form-group has-feedback">
             <label class="col-sm-2 control-label">预览</label>
             <div class="col-sm-4">
                  <img style="width: 100px;height: 100px" id="demo1" {% if  res.middleware_img  %} src="/{{ res.middleware_img }}"
                  {% endif %} >
             </div>
             </div>
         </fieldset>

   </div>

   <div class="box-footer ">
      <div class="row span7 text-center ">
             <button type="button" id="btnCancel" class="btn btn-default margin-right " >重置</button>
             <button type="button" id="btnSave" class="btn btn-info margin-right " >保存</button>
      </div>
   </div>

</form>

javascript:

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;

  //普通图片上传
  var uploadInst = upload.render({
      elem: '#input-b9',
      url: "{% url 'parameter-upload' %}",
      accept:'images',
      auto: false,//选择文件后不自动上传
       //上传前的回调
      bindAction: '#btnSave',
      choose: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
              $('#filename').val(file.name)
            $('#demo1').attr('src', result); //图片链接（base64）
          });
      },
      before: function (obj) {

          this.data = {
              middleware: $('input[name="middleware"]').val(),
              csrfmiddlewaretoken: '{{ csrf_token  }}',
          }
      },
      done: function(res){
            if (res.result){
                layer.alert('数据保存成功！', {icon: 1},function(index){
                    parent.layer.closeAll(); //关闭所有弹窗
                });
            }else{
                layer.alert(res.errors, {icon: 5});
            }
            return ;

    }

  });
});

models:

class VisualParameter(models.Model):
    middleware = models.CharField(max_length=20, verbose_name="中间件名称")
    middleware_img = models.ImageField(upload_to="media/image/%Y/%m", max_length=100, verbose_name="中间件图标")

forms:

class ParameterConfForm(forms.ModelForm):

    class Meta:
        model = VisualParameter
        fields = '__all__'

        error_messages = {
            "middleware": {"required": "请输入中间件名称"},
            "middleware_img": {"required": "请选择中间件图标"},
        }

views:

class UploadImageView(View):
    """
    个人中心：上传图片
        """

    def post(self, request):
        ret = dict(result=False)
        file = request.FILES.get('middleware_img')
        if 'id' in request.POST and request.POST['id']:
            para = get_object_or_404(VisualParameter, pk=request.POST.get('id'))
        else:
            para = VisualParameter()
        image_form = ParameterConfForm(data=request.POST, files=request.FILES, instance=para)
        if image_form.is_valid():
            image_form.save()
            ret['result'] = True
        else:
            pattern = '<li>.*?<ul class=.*?><li>(.*?)</li>'
            errors = str(image_form.errors)
            asset_form_errors = re.findall(pattern, errors)
            ret['errors'] = asset_form_errors[0]
        return HttpResponse(json.dumps(ret), content_type='application/json')

关于layui 上传文件可以查看官方示例，使用很简单，Django 中使用 formModel 的save 方法，可以很简单的将文件保存，这里需要设置 model 中字段类型为 文件类型（FileField、ImageField，和 FileField 一样，ImageField只是会验证上传对象是不是一个合法的图象文件。），并配置 自定义文件上传路径upload_to属性。

注意：在项目settings文件中，你要定义 MEDIA_ROOT ，将它的值设为用来存放上传文件的目录的完整路径。要确保 web 服务器所用的帐号拥有对该目录的写权限。