ajax 文件上传 iframe,上传文件的三种方式xhr,ajax和iframe及上传预览

Title

.upload {

display: inline-block;

background-color: #ef4300;

cursor: pointer;

width: 100px;

height: 35px;

text-align: center;

position: absolute;

line-height: 35px;

top: 0;

bottom: 0;

right: 0;

left: 0;

z-index: 99;

}

.file {

width: 100px;

height: 35px;

text-align: center;

position: absolute;

line-height: 35px;

top: 0;

bottom: 0;

right: 0;

left: 0;

z-index: 100;

opacity: 0;

}

上传

{% csrf_token %}

var csrftoken = $.cookie('csrftoken');

//第一种上传方式 iframe

function iframesubmitForm() {

$('#ifm2').load(function(){

var text= $('#ifm2').contents().find('body').text();

var obj= JSON.parse(text);

console.log(obj);

})

}

//第二种上传方法 ajax

function ajaxSubmit() {

var fileobj = document.getElementById('i1').files[0];

console.log(fileobj);

var fd = new FormData(); //依赖FormData对象

fd.append('username', 'root');

fd.append('upload', fileobj);

$.ajax({

url: '/xiaoqing/upload_file/',

type: 'POST',

data: fd,

processData: false,

cententType: false,

headers: {'X-CSRFtoken': csrftoken},

success: function(arg,a1,a2){

console.log(arg);

console.log(a1);

console.log(a2);

}

})

}

//第三种上传方法 xhr对象

function xhrSubmit() {

var fileobj = document.getElementById('i1').files[0];

console.log(fileobj);

var fd = new FormData(); //依赖FormData对象

fd.append('username','root');

fd.append('upload',fileobj);

var xhr= new XMLHttpRequest(); //创建对象

xhr.open('POST','/xiaoqing/upload_file/',true);

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8'); //POST请求必须设置

xhr.setRequestHeader('X-CSRFtoken',csrftoken);

xhr.send(fd);

xhr.onreadystatechange = function() {

if(xhr.readyState == 4){

var obj = JSON.parse(xhr.responseText); //返回值

console.log(obj);

}

}

}

三种上传方式

def upload(request):

return render(request,'upload.html')

def upload_file(request):

username=request.POST.get('username')

upload_obj=request.FILES.get('upload')

print(upload_obj)

print(username)

import os

upload_path=os.path.join('uploads',upload_obj.name)

with open(upload_path,'wb+') as f:

for item in upload_obj.chunks():

f.write(item)

ret = {'status':True,'data':request.POST.get('username')}

return HttpResponse(json.dumps(ret))

views.py

上传预览

如果发送的是文件建议使用iframe 因为他不依赖于其他，而jQuery(依赖FormData),XMLHttpresquest(也依赖FormData)

html

{% csrf_token %}

//上传预览

function uploadChange() { #绑定onchange事件

$('#ifm2').load(function(){

var text= $('#ifm2').contents().find('body').text();

var obj= JSON.parse(text);

$('#preview').empty()

var img_tag=document.createElement('img');

#创建img标签

img_tag.src='/'+obj.data;$('#preview').append(img_tag);

})

$('#form1').submit(); #提交表单

}

//第三种上传方式预览

function iframesubmitForm() {

$('#ifm2').load(function(){

var text= $('#ifm2').contents().find('body').text();

var obj= JSON.parse(text);

$('#preview').empty()

var img_tag=document.createElement('img');

img_tag.src='/'+ obj.data;

$('#preview').append(img_tag);

})

}

views.py:

def upload_file(request):

username=request.POST.get('username')

upload_obj=request.FILES.get('upload')

print(upload_obj)

print(username)

import os

image_path=os.path.join('static/imgs',upload_obj.name)

# upload_path=os.path.join('uploads',upload_obj.name)

with open(image_path,'wb') as f:

for item in upload_obj.chunks():

f.write(item)

ret = {'status':True,'data':image_path}

return HttpResponse(json.dumps(ret)) #返回image_path路径

Ajax上传数据和上传文件(三种方式)

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

SpringMVC上传文件的三种方式(转)

直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

SpringMVC上传文件的三种方式

直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

SpringMVC上传文件的三种方式(转载)

直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

SpringMVC上传文件的三种方式(转帖)

/* * 通过流的方式上传文件 * @RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象 */ @Re ...

react-绑定this并传参的三种方式

绑定this并传参的三种方式 在事件中绑定this并传参:

python webdriver api-上传文件的三种方法

上传文件: 第一种方式,sendkeys(),最简单的 #encoding=utf-8 from selenium import webdriver import unittest import ti ...

前端js,css文件合并三种方式,bat命令

前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

随机推荐

[No000069]Javascript中this关键字详解

Quiz 请看下面的代码,最后alert出来的是什么呢?(chrome下按F12,选择Console直接复制粘贴运行) var name = "Bob"; var nameObj ...

js024-最佳实践

js024-最佳实践 本章内容: 可维护的代码 保证代码性能 部署代码 24.1 可维护性 24.1.1 代码的可维护性 代码可维护性的特征: 特性 说明 可理解性 其他人可以理解它的用途和一般途径 ...

UI：关于RGB与16进制颜色值的转换

IOS基本图形绘制 参考 取色对照表 参照 页面背景改为   #5CACEE   的颜色.有两个方法 方法一: 加两个宏 #define UIColorFromHexWithAlpha(hexValu ...

lintcode: 三数之和II

题目 三数之和 II 给一个包含n个整数的数组S, 找到和与给定整数target最接近的三元组,返回这三个数的和. 样例 例如S = .  和最接近1的三元组是 -1 + 2 + 1 = 2. 注意 ...

PHP与MySQL动态网站开发2

处理HTML表单 通过$_REQUEST['city'];访问,$_REQUEST ...

iOS之设置状态栏颜色

状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View contro ...

libsvm工具箱C++编程实践2

转载请注明出处  http://blog.csdn.net/u013491262/article/details/37344193   点击打开链接 上周因为皮肤有点过敏,去医院来来回回一周. 前几天 ...

从壹开始前后端分离[.netCore 不定期 ] 36 ║解决JWT自定义中间件授权过期问题

缘起 哈喽,老张的不定期更新的日常又开始了,在咱们的前后端分离的.net core 框架中,虽然已经实现了权限验证, ...

Redis集群 - Sentinel与RAFT算法

引入   在主从模型中讲到 一旦Master宕机失效,需要手动将Slave角色提升为Master,否则这个子集群将不可用.   这个缺陷使得系统可用性大大降低.因此Redis专门提供了一个哨兵机制来实 ...

vmware 进入虚拟机VMware的系统后鼠标不能点

vmware 进入虚拟机VMware的系统后鼠标不能点 1)关闭虚拟机,重启win10,再打开虚拟机好了 2)