ajax方式上传图片到Django后台
参考价值最大
https://blog.csdn.net/huangql517/article/details/81259671
https://www.cnblogs.com/chenjianhong/p/4144333.html
https://blog.csdn.net/anphper/article/details/78140294
https://www.bbsmax.com/A/l1dyQexdem/
1、前端代码
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}upload-file{% endblock %}
{% block content %} {# 测试上传#}
<form>
{% csrf_token %}
<div class="updateImg">
<input name="photo" type="file" id="exampleInputFile">
<button id="photo" class="btn btn-danger" type="submit" onclick="ajaxFileUpload()">上传头像</button>
</div>
</form> <script type="text/javascript" src='{% static "js/jquery.js"%}'></script> <!-- 执行上传文件操作的函数 -->
<script type="text/javascript">
function ajaxFileUpload(){
var formData = new FormData();
var fileobj=$('#avatar')[0].files[0]; //注意这里的取值方式,获取文件对象
formData.append('avatarrrrr', fileobj);
formData.append('title', $("#id_title").val());
formData.append('column_id', $("#which_column").val());
formData.append('body', $("#id_body").val());
$.ajax({
url:"{% url 'article:article_post' %}",
type: 'POST', //一定要大写POST,坑我好久
mimeType: "multipart/form-data",
// 告诉jQuery不要去处理发送的数据, 发送对象。
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
data: formData,
success: function (data) {
console.log(data);
}
} ); }
</script>
{% endblock %}
获取上传文件的取值方式:$('#exampleInputFile')[0].files[0]
可以在console中测试一下
ajax方式上传图片到Django后台的更多相关文章
- OSS web直传 ajax方式 上传图片、文件
部分js代码 send_request = function(){//这是从后台获取认证策略等信息. var htmlobj=$.ajax({url:root+"/service/polic ...
- django 的 ajax 方式上传图片
页面代码: <html> <!-- 引入相关的js文件,相对路径 --> <script type="text/javascript" ...
- ajax实现上传图片保存到后台并读取
上传图片有两种方式: 1.fileReader 可以把图片解析成base64码的格式,简单粗暴 2.canvas 可以重新绘制一张图片,可以先把获取得到的图片的blob放进canvas里面,再生成 ...
- ajax方式提交文件到后台同时加其他参数
struts2后台Action方法,直接用参数成员变量对象的属性接收即可
- node学习笔记(二)(ajax方式向node后台提交数据)
通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...
- python笔记-20 django进阶 (model与form、modelform对比,三种ajax方式的对比,随机验证码,kindeditor)
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...
- 关于后台数据库正常存储中文通过Ajax方式传递到前台变成问号的处理
我的一个程序,用到的后台数据库MySql,字段是Varchar,Character Set是utf8,字段能且已经正确存储了中文. 从数据库取出信息后,在后台Java代码里Debug看到正确的中文. ...
- MVC 使用AJAX POST上传图片的方式
我们来总结一下使用AJAX以POST方式上传图片的方法. 一.普遍的一种是以file的格式请求.在Request.Files中获取文件. public ActionResult UploadFile( ...
- django 使用Ajax方式POST JSON数据包
示例1: js: function SaveAction(){ //点击 保存按键 var senddata = {"type":"A", "host ...
随机推荐
- C语言实现24点程序
一.简介 本程序的思想和算法来自于C语言教材后的实训项目,程序通过用户输入四个整数计算出能够通过加减乘除得到数字24的所有表达式,程序的设计有别于一般通过穷举实现的方式,效率得到提高.算法介绍如下: ...
- hdoj1257(DP-LIS/贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1257 方法1--贪心: 定义一个数组f[30005],由于题目没给数据量大小,故为了保险,开到最大(高 ...
- 136. Single Number (Bit)
Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...
- mybatis结合redis实战二级缓存
之前的文章中我们意见分析了一级缓存.二级缓存的相关源码和基本原理,今天我们来分享下了mybatis二级缓存和redis的结合,当然mybatis二级缓存也可以和ehcache.memcache.OSC ...
- MVC仓储使用join
代码: var result = from mpc in this.Context.Set<Domain.S_MENU_PURVIEWCODE>() join menu in this.C ...
- WARNING [main] org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [] milliseconds.
编译安装tomcat-native和tomcat-deamon以后,发现toomcat启动很慢,好久才有响应.以下日志供参考: 11-Sep-2017 12:19:28.102 INFO [main] ...
- Codeforces 689C. Mike and Chocolate Thieves 二分
C. Mike and Chocolate Thieves time limit per test:2 seconds memory limit per test:256 megabytes inpu ...
- plupload.Uploader多文件上传
.前台 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonUpfi ...
- easyjweb ejs 2014.2.25
一 .简单 easyjweb 项目 1. 创建一个web 项目 , 将easyjweb-corejar 包 和required 包下的所有jar 包拷到项目下. 2.写一个 action .. pa ...
- java socket 之UDP编程
一.概念 在TCP的所有操作中都必须建立可靠的连接,这样一来肯定会浪费大量的系统性能,为了减少这种开销,在网络中又提供了另外的一种传输协议——UDP,不可靠的连接(这种协议在各种聊天工具中被广泛使用) ...