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

Title

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);

}

}

}