之前作图像处理一直在用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. 精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解！

    原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...

  2. CSS效果：CSS改变下拉列表select框的默认样式

    原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可.当然右侧的小箭头可以用伪元素before或者after来实现. select { /*Chrome和Fir ...

  3. Android为TV端助力 转载：android自定义view实战(温度控制表)！

    效果图 package cn.ljuns.temperature.view; import com.example.mvp.R; import android.content.Context;impo ...

  4. Ubuntu添加新分区

    1.查看分区 ~$ sudo fdisk -l 2.添加分区 ~$ fdisk /dev/sda 3.输入m查看帮助 ~$ m 4.输入n新建分区,即添加分区 ~$ n 这里会出现设置分区大小 5.输 ...

  5. <1>Linux日志查找方法

    Linux日志查找方法 适用于测试,开发,运维人员,用来查找Linux服务器问题的一般方法,比较实用,如果有更好的办法可以一块讨论,欢迎大神们来指导哈!!! 进入正题 第一步.通过Xshell登录服务 ...

  6. C# 使用System.Data.OleDb;避免oracle中文乱码问题

    首先,需要保证oracle客户端服务器的字符集是一样的,并且保证该字符集支持中文.你可以使用plsql查看是否乱码. 代码: using System; using System.Collection ...

  7. git 入门教程之变基合并

    git 鼓励大量使用分支---"早建分支!多用分支!",这是因为即便创建再多的分支也不会造成存储或内存开销,并且分支的作用有助于我们分解逻辑工作,这样一样其实比维护单一臃肿分支要简 ...

  8. 使用MUI/html5plus集成微信支付需要注意的几点问题

    1)需要在服务器根目录放上证书,从微信开放平台下载 2)客户端组件目录名一定要按照微信要求

  9. Docker Data Center系列（三）- DTR安装指南

    本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 系统要求 1.1 硬件和软件要求 成为UCP管理的 ...

  10. 【redis专题(10)】KEY设计原则与技巧

    对比着关系型数据库,我们对redis key的设计一般有以下两种格式: 表名:主键名:主键值:列名 表名:主键值:列名 在所有主键名都是id的情况下(其实我个人不喜欢这种情况,比如user表,它的主键 ...