ajax上传多文件和数据,Ajax上传数据和上传文件（三种方式）

Ajax向后端发送数据可以有三种方式：原生Ajax方式，jQuery Ajax方式，iframe+form 方式(伪造Ajax方式)

Title

.btn {

background-color: coral;

color: white;

padding: 5px 10px;

border-radius: 26%;

cursor: pointer;

}

原生Ajax测试

get发送  post发送

仿Ajax(iframe+form)测试

提交

{% comment %}

上传文件

Ajax(jQuery+原生)上传

上传

Ajax(iframe+form)上传

上传

function AjaxTest1() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.responseText);

}

};

xhr.open("GET", "/ajax?p=123");

xhr.send(null);

}

function AjaxTest2() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.responseText);

}

};

xhr.open("POST", "/ajax");

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");

xhr.send("p=222");

}

function AjaxTest4() {

document.getElementById("ifm").onload = AjaxTest3;

document.getElementById("fm").submit();

}

function AjaxTest3() {

{#console.log(thi.contentWindow.document.body.innerText);#}

{#console.log($(thi).contents().find("body").html());#}

var content = this.contentWindow.document.body.innerHTML;

var obj = JSON.parse(content);

if (obj.status) {

alert(obj.message);

}

}

function AjaxTest5() {

var formdata = new FormData()

formdata.append("k1", "v1");

formdata.append("k2", "v2");

formdata.append("k3", document.getElementById("file").files[0]);

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

console.log(xhr.responseText);

}

};

xhr.open("POST", "/ajax");

{#xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");#}

xhr.send(formdata);

}

function AjaxTest6() {

document.getElementById("ifm2").onload = AjaxTest7;

document.getElementById("fm2").submit();

}

function AjaxTest7() {

{#console.log(thi.contentWindow.document.body.innerText);#}

{#console.log($(thi).contents().find("body").html());#}

var content = this.contentWindow.document.body.innerHTML;

var obj = JSON.parse(content);

console.log(obj);

}

三种方式传递数据和上传文件HTML页面

from django.shortcuts import render,HttpResponse,redirect

import uuid

import os

import json

# Create your views here.

def ajax(request):

print("get请求：",request.GET)

print("post请求：",request.POST)

# print("请求体：",request.body)

print(request.FILES)

ret={'status':True,'message':'ok!'}

file=request.FILES.get("k3")

f=open(file.name,"wb")

for i in file.chunks():

f.write(i);

f.close()

return HttpResponse(json.dumps(ret))

def index(request):

return render(request,"index.html")

后端view函数接收数据

模拟网站上传图片并在网页实时显示图片效果

Title

预览

function upload() {

document.getElementById("ifm").onload = uploadifm;

document.getElementById("fm").submit();

}

function uploadifm() {

var content = this.contentWindow.document.body.innerHTML;

var obj = JSON.parse(content);

var tag = document.createElement("img");

tag.src = obj.path;

$("#preview").empty().append(tag);

}

上传图片并在上传页面展示HTML页面

from django.shortcuts import render,HttpResponse,redirect

import uuid

import os

import json

# Create your views here.

def upload(request):

if request.method=="GET":

return render(request,"upload.html")

else:

dic={'status':True,'path':None,'message':None}

img=request.FILES.get("img")

uid=str(uuid.uuid4())

file_path=os.path.join("static",uid+img.name)

f=open(file_path,"wb")

for i in img.chunks():

f.write(i)

f.close()

dic["path"]=file_path

dic["message"]="上传成功！"

return HttpResponse(json.dumps(dic))

上传图片并在上传页面展示后端view函数

hive 分区表与数据产生关联的三种方式

所谓关联,可以理解为能够使用select查询到 1.load 这是最常用的一种方式 load data [local] inpath "数据路径" into table table ...

MVC ，Action方法传数据给视图有几种方式？--PS：tempData和Viewbag，还有ViewData之间的区别

//---------------------------------控制器向视图传递数据 public ActionResult TransData() { //1.ViewBag ViewBag. ...

getline数据来源你的三种方式

(1)getline从交互式的用户输入中\c中获取内容: # awk 'BEGIN {system("echo \"Input your name:\"");g ...

C#批量插入数据到Sqlserver中的三种方式

本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生 成 ...

【转载】C#批量插入数据到Sqlserver中的三种方式

引用:https://m.jb51.net/show/99543 这篇文章主要为大家详细介绍了C#批量插入数据到Sqlserver中的三种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本篇, ...

Git应用详解第四讲：版本回退的三种方式与stash

前言 前情提要:Git应用详解第三讲:本地分支的重要操作 git作为一款版本控制工具,其最核心的功能就是版本回退,没有之一.熟悉git版本回退的操作能够让你真真正正地放开手脚去开发,不用小心翼翼,怕一 ...

Django文件上传三种方式以及简单预览功能

主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码

三种方式上传文件-Java

前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...

头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)

flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...

随机推荐

Html5上传后有所见图片效果前端代码实现