如何让图片显示缩略图

JQuery实现input上传图片显示缩略图

万次阅读 2016-03-04 16:25:10

JQuery实现input上传图片显示缩略图最近做一套手机商城页面，在退款申请页面有上传图片显示缩略图的功能，以前没有做过这个，所以整理了一下。HTML ：上传图片： <div id="imgPreview"></div> ...

最近做一套手机商城页面，在退款申请页面有上传图片显示缩略图的功能，以前没有做过这个，所以整理了一下。



HTML ：


<p>上传图片：</p>
  <div id="imgPreview"></div>
  <span class="upload-img"><input id="fileUpload" accept="image/*" type="file" multiple="multiple"></span>
  </div>





CSS ：

 #imgPreview {
  float: left;
  border: none;
}
    #imgPreview img {
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
.upload-img {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: url("../images/self/upload.png") no-repeat 0;
  background-size: contain;
}
//这儿是为了改变上传按钮样式把input设为了透明色
.upload-img input {
  height: 50px;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  right: 0;
}


在这里我把上传按钮input变成了透明色，然后用一个设置了+号背景图的span盖在上面实现了上传按钮的样式改变，如不用图片也可以自行设置span样式来达到想要的效果。

JQuery ：

 

<script type=”text/javascript”> 

$(function () { 

$(“#fileupload”).change(function () { 

if (typeof (FileReader) != “undefined”) { 

var dvPreview = $(“#dvPreview”); 

dvPreview.html(“”); 

var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; 

$($(this)[0].files).each(function () { 

    var file = $(this); 

    if (regex.test(file[0].name.toLowerCase())) { 

        var reader = new FileReader(); 

        reader.onload = function (e) { 

            var img = $(“”); 

            img.attr(“src”, e.target.result); 

            dvPreview.append(img); 

        } 

        reader.readAsDataURL(file[0]); 

    } else { 

        alert(file[0].name + ” is not a valid image file.”); 

        dvPreview.html(“”); 

        return false; 

    } 

}); 

} else { 

alert(“This browser does not support HTML5 FileReader.”); 

} 

}); 

});


</script> 


给 input 绑定了一个 change() 事件，当事件被触发后，首先会检测该浏览器是否支持 HTML5 FileReader API ,如果支持就会执行一个 each 循环。 

在每一个循环里，用正则表达式判断文件后缀名是否为图片格式，如果是图片格式，如果是图片，就会用 readAsDataURL 方法来读取其 BASE64编码，然后以其为img元素的 src 属性值，添加 img 元素到 #imgPreview 中，实现上传显示缩略图。

收起

展开全文

jquery html input

Javascript 上传图片显示缩略图

千次阅读 2019-01-17 19:56:27

参加的项目是一个PC端网站，需要做一个更换头像的功能，要求是显示原先头像，然后点击上传按钮，选择图片后，显示被选中的图片的缩略图。效果图如下（有点丑，只是为了实现效果，手动滑稽）：代码如下： ...

参加的项目是一个PC端网站，需要做一个更换头像的功能，要求是显示原先头像，然后点击上传按钮，选择图片后，显示被选中的图片的缩略图。

效果图如下（有点丑，只是为了实现效果，手动滑稽）：



 

代码如下：



<!DOCTYPE html>

<html>

<head>

  <title>1234</title>

  <script type="text/javascript" src="jquery.js"></script>

</head>

<body>

  <div id="myAvatar">

    <span class="myAvatar">我的头像</span>

    <img src="3.jpg" width="100px" height="100px" alt="我的头像">

  </div>

  <div id="changeAvatar">

    <span class="changeAvatar">修改头像</span>

    <label>

        <input οnchange="previewFile()" style="position:absolute;opacity:0;width: 0px;height: 0px;" type="file" name="file" id="Album_img" accept="image/gif,image/jpeg,image/x-png"/>

        <img style="width: 60px;height: 60px;" title="上传文件" src="addAvatar.png">

    </label>

    <img class="newAvatar" src="" width="100px" height="100px" alt="修改后头像的缩略图" style="opacity: 0;">

    <div class="confirmChange">

      <input type="submit" name="confirmChange" id="confirmChange" value="确认修改">

    </div>

  </div>

</body>

<script type="text/javascript">

  function previewFile() {

    var preview = document.getElementsByTagName('img');

    var file    = document.querySelector('input[type=file]').files[0];

    var reader  = new FileReader();

    reader.onloadend = function () {

      preview[2].src = reader.result;

    }


    if (file) {

      reader.readAsDataURL(file);

      $(".newAvatar").css('opacity', '1');

    } else {

      $(".newAvatar").css('opacity', '0');

      preview[2].src = "";

    }

  }

</script>

</html>


主要有两个问题：

就是上传的图片的地址非常长，，，不是一般的长。为了实现功能，我把对应数据表的字段由varchar改成了text，遇到更好的方法后一定改正这种实现方法。
	js部分代码应该用的是封装好后的，不能用相应的jq代码去替换
希望可以各位小伙伴一起探讨，有更好的方法，麻烦留言哦，谢谢！

参考链接：https://codepen.io/skura23/pen/aWBGBJ

收起

展开全文

27-如何让文件夹中的图片显示缩略图
千次阅读 2019-07-18 20:11:53
问题描述如图：所有图片都看不到缩略图解决方案 1、单击上方菜单栏的“查看”选项卡，找到右边的...2、然后点击查看标签，如图，明白为什么不显示缩略图了吧?把勾取消掉吧，一切OK。 3、最终效果 ...
```
问题描述

如图：所有图片都看不到缩略图



 

解决方案

1、单击上方菜单栏的“查看”选项卡，找到右边的“选项”按钮，单击，如下图。



2、然后点击查看标签，如图，明白为什么不显示缩略图了吧?把勾取消掉吧，一切OK。



3、最终效果



 
```
收起
展开全文

Django Admin 上传多张图片并显示缩略图

千次阅读 2019-10-10 17:25:57

Django Admin 上传多张图片并显示缩略图 1.效果预览需要的python库：因为要处理图片，必须安装pillow库。 2.自定义Widget django Admin使用的图片上传Widget是： <input type='file'> 非常丑陋，...

Django Admin 上传多张图片并显示缩略图
文章目录
Django Admin 上传多张图片并显示缩略图
1.效果预览
2.自定义Widget
3.定义模型和模型表单
3.1 定义模型
3.2 定义模型表单
3.3 定义模型管理器
3.4 数据库迁移
4.Admin使用ajax上传图片并显示缩略图
4.1 设置settings.py
4.2 模板脚本
4.2 视图函数
4.3 url设置
4.4 显示缩略图
4.5 效果展示
5. 删除缩略图
6. 缩略图预览
7.保存图片到数据库
7.1 自定义一个Widget
7.2 修改模板脚本
7.3 修改模型和模型表单
8.显示模型中保存的图片
9. 在数据被删除的时候删除图片
10.开发建议

1.效果预览

需要的python库：因为要处理图片，必须安装pillow库。
2.自定义Widget
django Admin使用的图片上传Widget是：
<input type='file'>

非常丑陋，直接使用肯定是不行的，再说我们还要展示上传之后的图片的缩略图，因此必须自定义控件。
在models.py中，自定义控件的python代码如下：
class ImageInput(ClearableFileInput):
    template_name = "upload_multi_img/image_multi_upload.html"

    def render(self, name, value, attrs=None, renderer=None):
        context = self.get_context(name, value, attrs)
        template = loader.get_template(self.template_name).render(context)
        return mark_safe(template)

注意：这里必须继承django原来的图片上传Widget——ClearableFileInput，否则包含这个Widget 嵌入的模板表单将会出现编码错误，也就是缺少图中的enctype属性，导致文件上传失败。

Widget的HTML模板代码
就是上述代码中引入的image_multi_upload.html
{% load static %}
<div class="file-button" id="upload_image"
     style="background-image:  url('{% static 'upload_multi_img/add.png' %}');background-repeat: no-repeat;background-size: 64px;background-position: center">
    <input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %}
           value="{{ widget.value|stringformat:'s' }}"{% endif %} οnchange="uploadImage(this)"
           id="id_imageUpload" accept="image/jpeg,image/jpg,image/png,image/gif" multiple>
</div>
<style type="text/css">
    /*缩略图片样式*/
    .selected-img {
        width: 160px;
        height: 100px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border: solid #b1c6c1 1px;
        border-radius: 10px;
        margin-right: 10px;
    }
  /*缩略图片聚焦样式*/
    .selected-img:hover {
        border: solid #25adc6 2px;
    }
/*上传图片按钮样式*/
    .file-button {
        width: 160px;
        height: 100px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border: solid #b1c6c1 1px;
        border-radius: 10px;
        margin-right: 10px;
    }
/*上传图片按钮聚焦样式*/
    .file-button:hover {
        border: solid #25adc6 2px;
    }

    .file-button input {
        position: absolute;
        top: 0;
        height: 100px;
        opacity: 0;
    }
/*删除缩略图片icon聚焦样式*/
    i:hover {
        color: #0081C6;
    }
/*阿里云字体图标*/
    @font-face {
        font-family: 'iconfont';  /* project id 1361777 */
        src: url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.eot');
        src: url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.woff') format('woff'),
        url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 20px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-delete:before {
        content: "\e63c";
    }
</style>

注意：里面有张背景图片，保存目录在

3.定义模型和模型表单
3.1 定义模型
在models.py中定义一个数据模型
class UploadModel(models.Model):
     images = models.FileField('图片', upload_to="static/kaopu_shop/UploadModel")
     ......
3.2 定义模型表单
在models.py中定义上述模型的模型表单
class UploadForm(ModelForm):
    images = forms.FileField(label="图片", widget=ImageInput, help_text="按住ctrl多选,最多4张", required=False)

    class Meta:
        model = UploadModel
        fields = ['images']
注意:在ModelForm中重写了模型中的images字段，并且必须是ModelFrom类型，否则无法嵌入模型管理器。
3.3 定义模型管理器
在admin.py中定义对应的模型管理器
class UploadModelAdmin(admin.ModelAdmin):
    form = UploadForm
    
admin.site.register(UploadModel, UploadModelAdmin)#注册模型和模型管理器，别忘了，否则不显示
这样就将上述定义的模型表单嵌入到admin在change/add界面展示的表单里。如图：

3.4 数据库迁移
做完上述操作之后需要进行数据库迁移，将模型写入数据库
>python manage.py makemigrations
>python manage.py migrate
4.Admin使用ajax上传图片并显示缩略图
因为这里只需要上传图片并显示图片缩略图，不是保存整个admin表单，因此必须使用Ajax来实现。这里需要引入jQuery。
4.1 设置settings.py
在settings.py末尾中添加以下内容
# 媒体文件根路径和URL
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')  # media即为图片上传的根路径
MEDIA_URL = '/media/'

# 定义主机IP
HOST = "http://127.0.0.1:8000/"
# 定义图片暂存目录和模型图片目录
TEMP_IMAGE_SUB_DIR = "/tempimg/"
# 图片暂存目录
TEMP_IMAGE_DIR = MEDIA_ROOT + TEMP_IMAGE_SUB_DIR
# 模型图片目录
MODEL_IMAGE_SUB_DIR = "/model_images/"
MODEL_IMAGE_DIR = MEDIA_ROOT + MODEL_IMAGE_SUB_DIR
# 定义缩略图URL:http://127.0.0.1:8000/mdedia/tempimg/
WEB_HOST_MEDIA_URL = HOST+ MEDIA_URL[1:]+ TEMP_IMAGE_SUB_DIR
# 定义模型中保存的图片URL:http://127.0.0.1:8000/mdedia/model_images/
MODEL_MEDIA_URL = HOST+ MEDIA_URL[1:]+ MODEL_IMAGE_SUB_DIR
4.2 模板脚本
在模板中添加ajax脚本
{#引入jQuery的CDN#}
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    //必须加这个请求头，否则ajax请求被django屏蔽，这行代码不能放进function中声明，否则获取不到请求头
    var csrftoken = $.cookie('csrftoken');
    function uploadImage(obj) {
        var formData = new FormData();
        var files = $("#id_imageUpload")[0].files;//获取模板定义的图片上传按钮的文件
        //如果图片数目大于4，弹出警告
        if (files.length > 4) {
            alert("最多选择4张图片！");
            return;
        }
        //检查图片数目和图片类型，只允许上传jpg,png,gif格式
        if (0 < files.length && files.length < 5) {
            for (i = 0; i < files.length; i++) {
                var ext = files[i].name.slice(files[i].name.lastIndexOf(".") + 1).toLowerCase();
                if ("png" == ext || "jpg" == ext || "jpeg" == ext || "gif" == ext) {
                    formData.append(files[i].name, files[i]);
                }
            }
        }

        if (formData) {
            //必须加上csrftoken ，否则验证不通过，ajax请求无效
            $.ajax({
                url: '{% url 'upload_multi_img:upload_temp_images' %}',
                dataType: 'json',// 返回值类型 一般设置为json
                type: 'POST',
                headers: {"X-CSRFToken": csrftoken},//django默认拒绝post请求，必须加 csrftoken，否则请求被屏蔽
                processData: false,    // 告诉jQuery不要去处理发送的数据
                contentType: false, //告诉jQuery不检查类型
                data: formData,
                async: false,//必须设置为同步模式，否则success方法没有返回值
                success: function (data) {

                    //console.log(data["image_list"])
                    //动态添加HTML元素，显示上传的图片
                    for (i = 0; i < data["image_list"].length; i++) {
                        //console.log(data["image_list"][i])
                        $("#upload_image").before("<div class=\"selected-img\">\n" +
                            "    <i class=\"iconfont icon-delete\" style=\"z-index: 999;background-color:rgba(255,255,255,.8);position: absolute;right: 3px;top: 3px;\" title=\"删除图片\" οnclick=\"delete_img(this)\"></i>\n" +
                            "    <img src=\"" + data["image_list"][i] + "\" alt=\"待选图片\" style=\"width: 160px;height: 100px;border-radius: 10px;\">\n" +
                            "</div>");
                    }
                    alert("上传成功", data["msg"]);
                },
                error: function (error) {
                    alert("服务器异常");
                }
            })
        }
        return false;
    }
</script>

注意：

必须设置csrftoken，否则请求被django视为不安全而被屏蔽。
ajax必须设置为同步模式，否则没有返回值，获取不到后端返回的缩略图URL。

4.2 视图函数
首先在settings.py中添加一下：
WEB_HOST_MEDIA_URL = os.path.join('http://127.0.0.1:8000/', MEDIA_URL[1:], 'tempimg/')
然后编写视图函数
import json
import os
import uuid

from django.contrib.auth.decorators import login_required
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
from django.views.decorators.csrf import csrf_exempt

from upload_image.settings import WEB_HOST_MEDIA_URL
@login_required
@csrf_exempt
def upload_temp_image(request):
    result = {}
    if request.method == 'POST':
        files = request.FILES
        if files:
            image_url_list = []
            for file_name in files:
                image_url_list.append(handle_uploaded_file(files.get(file_name)))  # 处理上传文件
            result = {'msg': 'success', "image_list": image_url_list, }

        else:
            result = {'msg': 'failed', "image_list": []}
    return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")  # 返回json

# 处理上传的文件
def handle_uploaded_file(file):
    # 分割文件名，提取拓展名
    extension = os.path.splitext(file.name)
    # 使用uuid4重命名文件，防止重名文件相互覆盖
    #注意首先在项目的根目录下新建media/tempimg，或者自己使用python代码创建目录
    file_name = '{}{}'.format(uuid.uuid4(), extension[1])
    with open(TEMP_IMAGE_DIR + file_name, 'wb+') as destination:
        for chunk in file.chunks():#防止文件太大导致内存溢出
            destination.write(chunk)
    # 返回图片的URL
    return os.path.join(WEB_HOST_MEDIA_URL, file_name)

4.3 url设置
在应用的urls.py中声明url：
from django.urls import path
from upload_multi_img import views
app_name = 'upload_multi_img'
urlpatterns = [
    path('upload_temp_image/', views.upload_temp_image, name="upload_temp_images")
]

在项目的urls.py中引入应用的url
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('upload_multi_img.urls'),name="upload_multi_img")
]
4.4 显示缩略图
完成上面的配置之后，已经能上传图片到django后端了，但是还不能显示缩略图，因为没有配置缩略图显示URL，还需进行以下配置。
在项目的urls.py中配置缩略图显示路径：
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

from upload_image import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('upload_multi_img.urls'),name="upload_multi_img")
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  # 通过URL访问图片
4.5 效果展示
做完上述配置，就可以上传图片并展示缩略图了。

5. 删除缩略图
注意到目前为止，上传的图片还没有保存到我们的数据库，只是暂存在服务器上，有的时候用户上传图片之后可能需要临时更改，这时候就需要删除缩略图。在之前的模板中添加以下脚本：
//删除选中的图片,不能使用click，因为动态添加的不能绑定click
    function delete_img(e) {
        $(e).closest('.selected-img').remove();
    }
实现点击删除图标删除使用jquery动态添加的缩略图组件：
<div class="selected-img">
    <i title="删除图片" class="iconfont icon-delete" style="z-index: 999;background-color:rgba(255,255,255,.8);position: absolute;right: 3px;top: 3px;" onclick="delete_img(this)"></i>
    <img style="width: 160px;height: 100px;border-radius: 10px;" alt="待选图片" src=data["image_list"][i]>
</div>
注意这里只是删除了浏览器界面渲染的HTML元素，并没有删除服务器上暂存的图片，这样做的目的是减少ajax请求，提高响应速度，服务器上暂存的图片可以在保存到数据库之后全部清空，效果：

6. 缩略图预览
为了方便用户使用，缩略图还需要有查看大图的功能，在模板中添加以下脚本：
{#显示大图#}
<div id="outerdiv"
     style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:10000;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" alt="大图"/>
    </div>
</div>
#显示大图#}
<script type="text/javascript">
    //因为图片是动态添加的，所以不能使用选择器选择。
    function show_big_img(obj) {
        imgShow("#outerdiv", "#innerdiv", "#bigimg", obj);
    }

    function imgShow(outerdiv, innerdiv, bigimg, obj) {
        var src = obj.src;//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
        console.log("￥￥￥￥", obj.height, obj.width);
        var windowW = $(window).width();//获取当前窗口宽度
        var windowH = $(window).height();//获取当前窗口高度
        var realWidth = obj.naturalWidth;//获取图片真实宽度
        var realHeight = obj.naturalHeight;//获取图片真实高度
        var imgWidth, imgHeight;
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

        if (realHeight > windowH * scale) {//判断图片高度
            imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
            imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
            if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                imgWidth = windowW * scale;//再对宽度进行缩放
            }
        } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
            imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
            imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
        } else {//如果图片真实高度和宽度都符合要求，高宽不变
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放
        var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
        var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
        $(innerdiv).css({"top": h, "left": w});//设置#innerdiv的top和left属性
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg

        $(outerdiv).click(function () {//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }


</script>
效果如下：

7.保存图片到数据库
完成上述的设置之后，还需要在用户点击django admin表单的保存按钮之后将用户上传的图片保存到数据库。因为django的模型字段ImageField不支持保存多张图片，因此直接使用TextField字段保存所有上传图片的URL。
7.1 自定义一个Widget
这里自定义一个Widget是为了将图片URL上传和Admin界面的表单上传合并在一起，减少Ajax请求，也是为了能使用模型表单同时处理Admin表单数据和图片列表数据，这个Widget是隐藏在页面中不显示的。
upload_img_list.html
<Textarea  name="images_list" id="images_list" style="height: 200px;width: 300px;" ></Textarea>
注意：必须加上name属性，否则数据不会在表单提交的时候被提交。
python代码
class UploadImageList(TextInput):
    template_name = "upload_multi_img/upload_img_list.html"

    def render(self, name, value, attrs=None, renderer=None):
        context = self.get_context(name, value, attrs)
        template = loader.get_template(self.template_name).render(context)
        return mark_safe(template)
7.2 修改模板脚本
修改之前模板脚本中的 function delete_img和ajax的success回调函数。
<script type="text/javascript">

    var image_list = [];
    var csrftoken = $.cookie('csrftoken');
	
    //删除选中的图片,不能使用click，因为动态添加的不能绑定click
    function delete_img(e) {
        image_list.splice($.inArray($(e).closest('.selected-img').children("img").attr("src"), image_list), 1);//移除缩略图
        $("#images_list").val(image_list.join(','));
        $(e).closest('.selected-img').remove();
    }

    function uploadImage(obj) {
       .......

        if (formData) {
            //必须加上csrftoken ，否则验证不通过，ajax请求无效
            $.ajax({
               ....
                success: function (data) {

                    .....
                        //保存返回的图片URL到列表中
                        var index = $.inArray(data["image_list"][i], image_list);
                        if (index < 0) {
                            image_list.push(data["image_list"][i])
                        }
                    }
                    var list = image_list.join(',');　　//list是以,分割的字符串
                    $("#images_list").val(list);
                    alert("上传成功", data["msg"]);
                },
                error: function (error) {
                  ...
                }
            })
        }
        return false;
    }
</script>
7.3 修改模型和模型表单
class UploadModel(models.Model):
    images = models.FileField('图片', upload_to="static/upload_multi_img/")
    images_list = models.CharField('', max_length=10000)

    def save(self, *args, **kwargs):
        # 阻止images字段的数据保存在数据库中，因为我们不需要
        self.images = ""
        model_images = []
        print(self.images_list)
        # 将暂存目录中的图片转存到正式目录
        for root, dirs, files in os.walk(TEMP_IMAGE_DIR):
            print('files:', files)
            for file in files:
                if os.path.join(WEB_HOST_MEDIA_URL, file) in self.images_list:
                    shutil.move(TEMP_IMAGE_DIR + file, MODEL_IMAGE_DIR + file)
                    model_images.append(os.path.join(MODEL_MEDIA_URL, file))

        # 清空暂存目录下所有图片
        shutil.rmtree(TEMP_IMAGE_DIR)
        os.mkdir(TEMP_IMAGE_DIR)
        # 将模型原来的图片URL换为存到正式目录后的URL
        self.images_list = model_images
        # 必须调用父类的方法，否则数据不会保存
        super().save(*args, **kwargs)


class UploadForm(ModelForm):
     images = forms.FileField(label="图片", widget=ImageInput, help_text="按住ctrl多选,最多4张", required=False)
    images_list = forms.CharField(label='', widget=UploadImageList, help_text='', required=False)

    class Meta:
        model = UploadModel
        fields = ['images', 'images_list']

注意： images_list的label参数要保持空值，否则会渲染出一个label标签。
经过上面的修改，就能把图片保存到数据库中了，效果：
8.显示模型中保存的图片
上面已经把图片URL以字符串的形式保存在数据库中了，接下来还需要把保存的图片显示在admin界面上。
修改upload_img_list.html为：
<Textarea name="images_list" id="images_list"
          style="height: 200px;width: 300px;" hidden>{{ widget.value|stringformat:'s' }}</Textarea>
在image_multi_upload.html再添加一个脚本
{#显示模型中保存的图片#}
<script type="text/javascript">
    $(document).ready(function () {
        var model_image_list = $("#images_list").val().split(",")
        //如果$("#images_list").val()为空，会返回一个"None"字符串
        if (model_image_list.length > 1) {
            for (i = 0; i < model_image_list.length; i++) {
                $("#upload_image").before("<div class=\"selected-img\">\n" +
                    "    <i class=\"iconfont icon-delete\" style=\"z-index: 999;background-color:rgba(255,255,255,.8);position: absolute;right: 3px;top: 3px;\" title=\"删除图片\" οnclick=\"delete_img(this)\"></i>\n" +
                    "    <img src=\"" + model_image_list[i].replace("'", '').replace("'", '') + "\" alt=\"待选图片\" style=\"width: 160px;height: 100px;border-radius: 10px;\" οnclick=\"show_big_img(this)\">\n" +
                    "</div>");
            }
        }
    })
</script>

这样就能显示模型中保存的图片了。效果：


9. 在数据被删除的时候删除图片
最后，还需要在数据被删除时删除保存的图片，防止产生大量的垃圾图片。在models.py中添加一个信号接收器，接收模型被删除的信号：
# 删除被删除的模型的图片
@receiver(post_delete, sender=UploadModel)
def delete_upload_files(sender, instance, **kwargs):
    image_list = getattr(instance, 'images_list', '')

    if not image_list:
        return
    else:
        # 去除image_list中URL存在的''字符
        list = image_list.replace("'", "").replace("'", "").split(",")
        # 删除被删除的模型的图片
        for image in list:
            # 获取文件名
            delete_image_name = image.split('/')[-1]
            os.remove(MODEL_IMAGE_DIR + delete_image_name)


class UploadForm(ModelForm):
    .......
注意：这里使用信号接收器而不是重写模型delete方法是因为批量删除模型的时候不会调用模型的delete方法。
10.开发建议
django是一个非常强大的框架，但是唯一不足的地方是它的Admin界面非常丑陋，本文通过一系列定制在Admin实现了多张图片上传，显示缩略图，缩略图预览，保存多张图片到数据库的功能。按照这样的方式还可以做一定的拓展，比如上传文件时显示相应的文件图标等。
完整源码链接：链接: https://pan.baidu.com/s/1Sa8cEg19bNqoDkiCGEWaog 提取码: fb49

注意：python版本是python3.6.8，django版本是2.2.6，开发工具是pycharm2019

收起

展开全文

Django Admin

上传图片显示缩略图，可上传多张
2015-11-28 14:41:29
上传图片显示缩略图，可上传多张： HTML代码部分： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> By：DragonDean
收起
html
选择图片后显示缩略图（自动生成缩略图）
千次阅读 2019-05-27 15:59:53
下面是完整代码，看注释： <!DOCTYPE html> <html lang="en"> <head>...显示选择图片的缩略图</title> <style> #dropbox { width: 400px; height: 70px;...
收起
drop drag
图片上传显示缩略图
千次阅读 2017-08-01 09:58:33
//图片异常的捕捉，防止用户修改后缀来伪造图片 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform....
收起
JS实现input上传图片时显示缩略图
千次阅读 2017-10-31 23:51:01
Js实现input上传图片时显示缩略图 document.getElementById('imgFile').onchange = function(){ var preview = document.querySelector("img"); var file = document.querySelector
收起
javascript
如何在显示图片缩略图时不挤压拉伸图片
万次阅读 2018-03-07 10:57:19
前言：我们在前端显示图片缩略图的时候，会遇到不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。方案一 ...
收起
前端
php中图片文件上传，显示缩略图
千次阅读 2019-08-10 21:26:16
php中图片文件上传，显示缩略图 htm代码块： <meta charset="utf-8" /> <style> img { max-width: 100px; max-height: 100px; } input[type="file"] { display: none; } </st...
收起
php
上传图片时，选择图片后显示缩略图
千次阅读 2018-01-17 15:26:35
$(function(){ $("#file1").on("change",function(){ var file=this.files[0]; if(this.files && file){ var reader=new FileReader(); reader.onload=function(e){ $("#img1").attr("src",e.targ
收起
jQuery
CSS控制图片显示缩略图
千次阅读 2017-11-22 14:27:00
<style type="text/css">.box { vertical-align:middle; width:160px; height:160px; text-align:center; border: 1px solid #eee;}/* For IE7 */.box img { vertica...
收起
listview显示图片缩略图的问题
2016-12-31 05:48:18
那么我的问题来了：如果图片过多，在下滑或者上滑的时候，其他格式的文件显示的图标会乱掉，会显示成图片缩略图的样子，打断点调试发现非图片格式文件走的是正确的显示方式，但是实际显示出来的确是某个图片缩略图。...
收起
Windows Server 2008 显示图片缩略图
千次阅读 2013-10-26 07:30:25
在 Windows Server 2008 中，图片不能显示缩略图。解决办法： 1. 打开资源管理器，依次选择 Organize -> Folder and search options 2. 点击 View 选项卡，将 Always show icons, never thumbnails 前面的勾选...
收起
android图片视频缩略图显示
千次阅读 2014-01-25 16:03:19
* 获取图片和视频的缩略图 这两个方法必须在2.2及以上版本使用，因为其中使用了ThumbnailUtils这个类 */ public class MainActivity extends Activity { private ImageView imageThumbnail; private ...
收起
java android
win10突然无法显示图片缩略图怎么办
2020-11-10 15:44:33
已经尝试过了文件查看取消勾选一直显示图标从不显示缩略图，以及此电脑–右键属性–高级系统设置–视觉效果–勾上–显示缩略图，而不是显示图标。还有360图标修复，但是都没有解决问题。最后通过新增管理账户进去...
收起
图标设计系统安装
Pyqt5 QListWidget 显示图片缩略图
千次阅读 2020-03-01 23:25:08
# 2020-03-01 ...# 通过和piexif 结合把图片的缩略图给显示出来 import sys from PyQt5.QtCore import QSize, Qt from PyQt5.QtGui import QPixmap, QIcon from PyQt5.QtWidgets import QWidget, QA...
收起
pyqt python
DEDE在文章列表文章没有缩略图的不显示图片,有的则显示缩略图
千次阅读 2015-03-10 16:30:09
解决在文章列表文章没有缩略图的不显示图片,有的则显示缩略图在5.3最开始的版本。好象是有这个功能的。就是在列表里。。如果改文章没有缩略图则不显示默认的没有缩略图的土片。如果有则显示缩略图 但在后续的...
收起
Larvel5.2上传图片并显示缩略图
千次阅读 2016-04-19 11:23:41
//Ajax上传图片 public function imgUpload() { $file = Input::file('file'); $id = Input::get('id'); $allowed_extensions = ["png", "jpg", "gif"]; if ($file->getClientOriginalExtension() && !in_...
收起
图片缩略图显示模式变成图标
2017-04-14 10:12:52
图片缩略图显示模式变成图标：在控制面板——系统：双击，系统属性——高级——设置：勾选，显示缩略图而不是显示图标。方法二：进入到资源管理器：
收起
多图片上传时候显示全部图片的缩略图
千次阅读 2018-06-12 20:17:15
js读取file文件时有一个FileReader的onloadend方法,即成功读取文件...我遇到的问题：同时选多个文件上传，并且把图片转成base64用于预览，结果只保留了最后一个图片的base64,前面图片的base64没有存下来。解决办法...
收起
base64 file onload
vue图片缩略图及图片预览功能
2021-01-01 00:37:55
上次有个需求，是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的，几句代码可以搞定，也不需要什么额外的插件。实现的效果如下： - vue显示图片缩略图 - vue显示图片预览功能
收起
上传图片,即时显示缩略图
千次阅读 2009-11-13 09:36:00
上传图片,即时显示缩略图 IE,FF中可能运行通过!! 即时显示缩略图 <!-- var allowExt = [jpg, gif, bmp, png, jpeg]; var preivew = function(file, container){ try{ var pic = new
收起
function file path javascript firefox
安装ERDAS导致图片缩略图不能显示
2017-01-18 11:28:10
求助，安装ERDAS2015后导致jpg,png图片缩略图不能显示，bmp正常。
收起
erdas
dede5.7实现有缩略图则显示缩略图，无则不显示图片
千次阅读 2012-08-27 10:27:01
不少用建站朋友想实现这个功能，有时候未必偏偏文章都会配有图片，所以就想实现有缩略图则显示缩略图，无则不显示图片。可以按照下面这个方法修改实现。编辑打开/templets/default/list_article.htm (这是...
收起
class
ubuntu16.04下视频文件不显示缩略图，请教如何让其显示缩略图
千次阅读 2019-07-08 18:09:20
1.Ctrl+Alt+T打开终端，cd /home/xxx/ ... 2.Ctrl+H显示隐藏文件，路径:/home/xxx/.cache/thumbnails,把thumbnails这个文件夹干掉参考网址： https://zhidao.baidu.com/question/2116700174832468307.html ...
收起
H5 移动端上传图片和视频页面显示缩略图
万次阅读 2018-07-17 17:15:11
html代码：为了方便大家，我用的都是内嵌样式照片(可上传三张) 视频(可上传一个视频) 效果：实现缩略图效果代码： var videoFile = document.getElementById('y') function getFileURL(file) { var getUrl = ...
收起
文件上传

JQuery实现input上传图片显示缩略图

HTML ：

CSS ：

JQuery ：

Javascript 上传图片 显示缩略图

27-如何让文件夹中的图片显示缩略图

问题描述

解决方案

3、最终效果

Django Admin 上传多张图片并显示缩略图

Django Admin 上传多张图片并显示缩略图

文章目录

1.效果预览

2.自定义Widget

3.定义模型和模型表单

3.1 定义模型

3.2 定义模型表单

3.3 定义模型管理器

3.4 数据库迁移

4.Admin使用ajax上传图片并显示缩略图

4.1 设置settings.py

4.2 模板脚本

4.2 视图函数

4.3 url设置

4.4 显示缩略图

4.5 效果展示

5. 删除缩略图

6. 缩略图预览

7.保存图片到数据库

7.1 自定义一个Widget

7.2 修改模板脚本

7.3 修改模型和模型表单

8.显示模型中保存的图片

9. 在数据被删除的时候删除图片

10.开发建议

上传图片显示缩略图，可上传多张

选择图片后显示缩略图（自动生成缩略图）

图片上传显示缩略图

JS实现input上传图片时显示缩略图

如何在显示图片缩略图时不挤压拉伸图片

php中图片文件上传，显示缩略图

上传图片时，选择图片后显示缩略图

CSS控制图片显示缩略图

listview显示图片缩略图的问题

Windows Server 2008 显示图片缩略图

android图片视频缩略图显示

win10突然无法显示图片缩略图怎么办

Pyqt5 QListWidget 显示图片缩略图

DEDE在文章列表文章没有缩略图的不显示图片,有的则显示缩略图

Larvel5.2上传图片并显示缩略图

图片缩略图显示模式变成图标

多图片上传时候显示全部图片的缩略图

vue图片缩略图及图片预览功能

上传图片,即时显示缩略图

安装ERDAS导致图片缩略图不能显示

dede5.7实现有缩略图则显示缩略图，无则不显示图片

ubuntu16.04下视频文件不显示缩略图，请教如何让其显示缩略图

H5 移动端上传图片 和 视频 页面显示缩略图

如何让图片显示缩略图

Javascript 上传图片显示缩略图

H5 移动端上传图片和视频页面显示缩略图