之前作图像处理一直在用form表单做图片数据传输， 个人感觉low到爆炸而且用户体验极差，现在介绍一个一部批量上传图片的小技巧，忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便，也要考虑代码的健壮性个用户体验度。

异步提交照片需要一个CSS文件和相应jqurey文件。如图：

HTML具体代码如下

<!DOCTYPE html>

{# 加载静态文件 #}

{% load static %}

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    {# 引入外链式css #}

    <link rel="stylesheet" type="text/css" href="{% static 'css/Huploadify.css' %}"/>

    {# 载入js库 #}

    <script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>

    <script src="{% static 'js/axios.js' %}"></script>

    <script src="{% static 'js/jquery.Huploadify.js' %}"></script>

    <title>异步多上传</title>

</head>

<body>

    <center>

        {# 定义一个上传容器 #}

        <div id="upload">上传文件</div>

    </center>

    <script>

   //定义异步上传对象

   let up = $("#upload").Huploadify({

        //是否自动上传

        auto:false,

        //设置文件大小限制

        fileSizeLimit:99999999999,

        //设置删除延时

        removeTimeout:999999999,

        //文件类型

        filetypeExts:'*.*',

        //是否多文件

        multi:true,

        //是否显示进度条

        showUploadedPercent:true,

        //是否显示文件大小

        showUploadedSize:true,

        //请求方式

        method:'post',

        //请求网址

        uploader:'/upload',

        //回调方法

        onUploadComplete:function(file){

            console.log(file.name+'上传成功')

        },

        //删除文件

        onCancel:function(file){

            console.log(file.name+'删除成功');

        }

   });

    </script>

</body>

</html>

后台代码如下

from django.shortcuts import render,redirect

from django.http import HttpResponse,HttpResponseRedirect

#导入试图方法

from django.views import View

import json

import os

#导入本地化文件照片缓存路径

from mymac.settings import UPLOAD_ROOT

#定义上传试图类

class UploadTest(View):

    #定义上传方法

    def post(self,request):

        img = request.FILES.get("file")

        print(img)

        f = open(os.path.join(UPLOAD_ROOT,'',img.name),'wb')

        for chunk in img.chunks():

            f.write(chunk)

        f.close()

        return HttpResponse(json.dumps({'status':'ok'},ensure_ascii=False),content_type='application/json')

settings设置如图

摒弃FORM表单上传图片，异步批量上传照片的更多相关文章

  1. JavaScript实现form表单的多文件上传

    form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...

  2. [Nginx 2] form表单提交，图片上传

    导读:昨晚恶补了一些Nginx服务器的东西,从整体上对Nginx有一个初步的了解.上午去找师哥问了问目前项目中的使用情况,然后就开始上传图片了.这里就简单总结整理一下今天的成果,以后接着提升.简单粗暴 ...

  3. form表单系列中文件上传及预览

    文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...

  4. iframe和form表单实现ajax请求上传数据

    form的target属性设置为iframe的name值时,表示提交到url后返回的数据显示到iframe区域 <form action="/upload.html" met ...

  5. form表单那点事儿(上) 基础篇

    form表单那点事儿(上) 基础篇 做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了fo ...

  6. 【ASP.NET Web API教程】5.3 发送HTML表单数据：文件上传与多部分MIME

    原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...

  7. 百度编辑器ueditor批量上传图片或者批量上传文件时，文件名称和内容不符合，错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  8. jquery mobile 表单提交 图片/文件 上传

    jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1  html代码 <!do ...

  9. node07---post请求、表单提交、文件上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 2018-11-09 VS Code英汉词典插件v0.0.4-驼峰下划线命名

    首先, 在两天时间内安装数破百, 多谢支持. VS Code插件市场地址: 英汉词典 - Visual Studio Marketplace 开源库地址同前文: Visual Studio Code插 ...

  2. android笔试题二

    1.android系统架构: Linux内核——标准库——Framework层——应用层 Linux层包括:Android系统的核心服务,硬件驱动,进程管理,系统安全等等 (现在又加了一层变成了:Li ...

  3. Python 基于Python从mysql表读取千万数据实践

    基于Python 从mysql表读取千万数据实践   by:授客 QQ:1033553122 场景:   有以下两个表,两者都有一个表字段,名为waybill_no,我们需要从tl_waybill_b ...

  4. 上了IPD和CMMI，为什么还要搞敏捷？

    文/资深顾问 杨学明 现在国内许多产品创新型企业一旦研发团队上了规模,就会进行IPD体系的变革或CMMI的认证,但现在还有一种更加流程的开发模式,就是敏捷,华为公司早在2009年正式发文在全公司现在流 ...

  5. SQL SERVER LINUX

    以前在Linux平台上访问SQL Server时常用的方式有:http://www.freetds.org/https://sourceforge.net/projects/jtds/这方面的资料已经 ...

  6. java实现wc

    github项目传送门:https://github.com/yanghuipeng/wc 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程 ...

  7. jdk各版本特性

    JDK Version 1.0 开发代号为Oak(橡树),于1996-01-23发行. JDK Version 1.1 于1997-02-19发行. 引入的新特性包括: 引入JDBC(Java Dat ...

  8. 剑指Offer 答题截图

  9. sql 语句-初级进阶（一）

    以下所有的sql语句是根据个人资料进行操作,为方便大家操作联系,附上链接:: 链接:https://pan.baidu.com/s/14LmWyhJPQRzpjURQBKM4mA 提取码:wu1q  ...

  10. 【MM系列】SAP库龄报表逻辑理解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP库龄报表逻辑理解   第一篇 ...