之前作图像处理一直在用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. K8S Calico

    NetworkPolicy是kubernetes对pod的隔离手段,是宿主机上的一系列iptables规则. Egress 表示出站流量,就是pod作为客户端访问外部服务,pod地址作为源地址.策略可 ...

  2. 2018-10-19 Chrome插件实现GitHub代码离线翻译v0.0.4

    续前文Chrome插件实现GitHub代码翻译v0.0.3. 添加了对驼峰命名的支持. 由于调用浏览器插件-离线英汉词典进行词汇翻译, 因此也不依赖于任何在线翻译服务. Chrome插件: 官网链接 ...

  3. centos6 自带python2.6升级python2.7+

    centos6系统自带Python为2.6.6版本,升级搞版本操作如下(python2-python3都一样) 1.下载需要升级的python包 官方下载地址:https://www.python.o ...

  4. Android项目实战（五十一）：浅谈GreenDao

    比较出名的数据库框架 GreenDao使用步骤: 1.app目录下的build.gradle文件 添加依赖 compile 'org.greenrobot:greendao:3.2.0' 顶部添加插件 ...

  5. WiFi的名词缩写

    http://blog.csdn.net/jayxujia123/article/details/12842295 无线网络最初采用的安全机制是WEP(有线等效私密),但是后来发现WEP是很不安全的, ...

  6. Scala实现树形结构

    package graphx import java.util.ArrayList import java.util.List /** * Created by zhen on 2018/12/28. ...

  7. SQL Server中sys.syslogin中updatedate字段的浅析

    在系统视图sys.syslogins中,有createdate与updatedate两个字段,分别表示创建登录名与更新登录名的日期,如果你用updatedate的值来判断一个登录名的权限是否被修改过, ...

  8. STL之迭代器(iterator)

    1 头文件 所有容器有含有其各自的迭代器型别(iterator types),所以当你使用一般的容器迭代器时,并不需要含入专门的头文件.不过有几种特别的迭代器,例如逆向迭代器,被定义于<iter ...

  9. sqlserver中分区函数 partition by与 group by 区别 删除关键字段重复列

    partition  by关键字是分析性函数的一部分,它和聚合函数(如group by)不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录, partition  by ...

  10. App分享之微信微博等各个社交平台的分享授权规则和常见问题

    一.新浪微博分享规则 新浪微博支持分享类型: 应用内分享也就是网页分享支持: 文字,文字+图片,要分享链接需要链接添加在text里分享 客户端分享支持:文字,图片,文字+图片,图片+文字+链接 参数说 ...