之前作图像处理一直在用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. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  2. loj#6031. 「雅礼集训 2017 Day1」字符串(SAM 广义SAM 数据分治)

    题意 链接 Sol \(10^5\)次询问每次询问\(10^5\)个区间..这种题第一感觉就是根号/数据分治的模型. \(K\)是个定值这个很关键. 考虑\(K\)比较小的情况,可以直接暴力建SAM, ...

  3. Win7录制电脑屏幕视频

    在日常生活中,有时候我们需要在电脑上录制视频,那就需要找到一款合适的录像工具,选择迅捷屏幕录像工具就是一个不错的选择,操作简单轻松易上手,美轮美奂的无损画质,教学视频.电影.游戏等都可以进行录制哦! ...

  4. java对程序的简单加密

    File file = new File("oppo.in"); File file1 = new File("main.in"); GregorianCale ...

  5. Openlayer3之绚丽的界面框架-Materialize

    一群做C++的老伙计搞前端开发,徒手写html和css应该会折寿..在网上找了半天,Materialize算是用起来很方便的一款前端界面框架.Google的Material Design看起来感觉还是 ...

  6. 添加/删除/修改Windows 7右键的“打开方式”

    右键菜单添加/删除"打开方式" 此"打开方式"非系统的"打开方式",二者可以并存. 右键菜单添加"打开方式" 在HKEY ...

  7. css 布局之定位 相对/绝对/成比例缩放

    给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...

  8. python与html5 websocket开发聊天对话窗

    1.下载必须的包 https://github.com/Pithikos/python-websocket-server,解压缩并把文件夹名‘python-websocket-server-maste ...

  9. Symantec Backup Exec 2010 安装报 bad ELF interpreter: No such file or directory

    在64位的Red Hat Enterprise Linux Server release 6.6上安装Symantec Backup Exec 2010时, 遇到下面错误: # ./installra ...

  10. 记一次坑爹的ORA-01152&ORA-01110错误

    最近做RMAN还原时遇到了一次非常坑爹的ORA-01152&ORA-01110错误.遇到的具体错误信息如下所示: RMAN> alter database open resetlogs; ...