摒弃FORM表单上传图片,异步批量上传照片
之前作图像处理一直在用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表单上传图片,异步批量上传照片的更多相关文章
- JavaScript实现form表单的多文件上传
form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...
- [Nginx 2] form表单提交,图片上传
导读:昨晚恶补了一些Nginx服务器的东西,从整体上对Nginx有一个初步的了解.上午去找师哥问了问目前项目中的使用情况,然后就开始上传图片了.这里就简单总结整理一下今天的成果,以后接着提升.简单粗暴 ...
- form表单系列中文件上传及预览
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
- iframe和form表单实现ajax请求上传数据
form的target属性设置为iframe的name值时,表示提交到url后返回的数据显示到iframe区域 <form action="/upload.html" met ...
- form表单那点事儿(上) 基础篇
form表单那点事儿(上) 基础篇 做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了fo ...
- 【ASP.NET Web API教程】5.3 发送HTML表单数据:文件上传与多部分MIME
原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...
- 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题
百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...
- jquery mobile 表单提交 图片/文件 上传
jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1 html代码 <!do ...
- node07---post请求、表单提交、文件上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- HTML5为输入框添加语音输入功能
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
- SENDMESSAGE和POSTMESSAGE
原文:http://www.cnblogs.com/wind-net/archive/2012/11/01/2750123.html SendMessage 和 PostMessage 的区别 1.首 ...
- Android为TV端助力 遥控器的映射
第一编写kl文件时先在盒子上输入getevent -v查看设备信息,设备信息里有vendor.product.version, 假如分别是xxxx,yyyy,zzzz,那么你的文件名就要命名为Vend ...
- <自动化测试方案_5>第五章、代码单元自动化测试
第五章.代码单元自动化测试 代码单元测试需要根据编程语言,选择单元测试框架,然后访问类方法,函数.代码单元测试做自动化,相比API.UI自动化做起来更加麻烦,建议放到待API自动化测试.UI自动化测试 ...
- ThreadPoolExecutor源码解析(二)
1.ThreadPoolExcuter运行实例 首先我们先看如何新建一个ThreadPoolExecutor去运行线程.然后深入到源码中去看ThreadPoolExecutor里面使如何运作的. pu ...
- Visual Studio Team Services 动手实验
Visual Studio Team Services 动手实验 概述 为Visual Studio Team Services提供的动手实验,要完成实验首先需要满足以下条件: Visual Stud ...
- Linux平台下RMAN异机恢复总结
下面总结.整理一下RMAN异机恢复这方面的知识点,这篇笔记在个人笔记里面躺了几年了,直到最近偶然被翻看到,遂整理.总结一下.如下所示,个人将整个RMAN异机恢复分为准备工作和操作步骤两大部分.当然,准 ...
- A problem has been detected and windows has been shut down to prevent damage to your computer.他么啥意思?看这里!【蓝屏】
A problem has been detected and windows has been shut down to prevent damage to your computer. 检测到问 ...
- Debian, Ubuntu linux安装openjdk
sudo apt-get install openjdk-8-jre 这只是单单安装了jre而已,不要安装这个 安装下面这个就行了 sudo apt-get install openjdk-8-jdk ...
- web前端(10)—— 浮动,清除默认样式
文档流 web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”,就跟编程语言一样,都是由上而下 而设计软件 ,想往哪里画东西,就去哪里画 文档流带来的最明显 ...