上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.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; } </style>
</head>
<body> <div style="position: relative;width: 100px;height: 35px">
<input type="file" id="i1" name="upload" class="file">
<a class="upload">上传</a>
</div>
<input type="submit" value="xhr提交" onclick="xhrSubmit();"> <input type="submit" value="ajax提交" onclick="ajaxSubmit();"> <script src="/static/jquery-1.12.4.js"></script>
<script src="/static/jquery.cookie.js"></script> <form action="/xiaoqing/upload_file/" method="post" target="ifm1" enctype="multipart/form-data">
{% csrf_token %} <iframe id="ifm2" name="ifm1"></iframe>
<input type="file" name="upload"> <input type="submit" onclick="iframesubmitForm();" value="Form提交" > </form> <script> 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); }
} } </script> </body>
</html>
三种上传方式
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
<form id="form1" action="/xiaoqing/upload_file/" method="post" target="ifm1" enctype="multipart/form-data">
{% csrf_token %} <iframe id="ifm2" name="ifm1" style="display: none"></iframe>
<input type="file" name="upload" onchange="uploadChange();"> <input type="submit" onclick="iframesubmitForm();" value="Form提交" > </form> <div id="preview"></div> <script>
//上传预览
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); }) } </script>
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路径
上传文件的三种方式xhr,ajax和iframe及上传预览的更多相关文章
- Ajax上传数据和上传文件(三种方式)
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...
- 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 ...
- SpringMVC上传文件的三种方式(待整理...)
参考链接 http://www.cnblogs.com/fjsnail/p/3491033.html
- react-绑定this并传参的三种方式
绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...
- 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的大文 ...
随机推荐
- php安全开发(1)文件包含漏洞
开发过程总结的漏洞: 一,,如何造成包含漏洞:在通过函数包含文件时,由于没有对包含的文件名进行有效的过滤处理,被攻击者利用从而导致了包含了Web根目录以外的文件进来,就会导致文件信息的泄露甚至注入了恶 ...
- wine安装稳定使用falsh播放器
1安装wine,wine安装使用网上自行查找 2.安装flash播放器.exe 下载附件的falsh播放相关.tar.gz,解压后得到 Flash.ocx (flash10 for windows的插 ...
- java枚举通俗实例解析
1 枚举 1.1 枚举的作用 我们经常要定义一些常量值,例如日期(MONDAY,TUESDAY……)或者错误码等.可以将常量组织起来,统一进行管理.常量比较只是值 ...
- 线性代数导论 | Linear Algebra 课程
搞统计的线性代数和概率论必须精通,最好要能锻炼出直觉,再学机器学习才会事半功倍. 线性代数只推荐Prof. Gilbert Strang的MIT课程,有视频,有教材,有习题,有考试,一套学下来基本就入 ...
- springcloud-feign组件实现声明式的调用
11.使用feign实现声明式的调用 使用RestTemplate+ribbon已经可以完成对服务端负载均衡的调用,为什么还要使用feign? @RequestMapping("/hi&qu ...
- 笨办法学python 文本复制
本来面目 from sys import argv from os.path import exists script, from_file, to_file = argv print(f" ...
- 数据仓库之Data Vault模型总结
一,Data Vault模型有几个主要的组件,这里先总结一下: 1.Hub组件,是一个数据表,用于记录在业务应用中常用到的业务实体键值,如员工ID,发票号.客户编号.车辆号等. 表内包括几个关键字段: ...
- Jsoup解析获取品花社图片
Jsoup解析获取品花社图片 emmmm,闲着没事,想起了之前一个学长做的品花社的APP,刚好之前有了解Jsoup这个Java解析HTML的库,便花了三四个小时写了这个东西,把网站上大大小小的MM的图 ...
- python中一些传参事情
#一个参数的传参 def hello(a): print(a+'王彦军你好')hello('hello')''' #2个参数的 def ab(a,b): print(a+'你好') ...
- 《深入分析Java web技术内幕》读书笔记(一)
1.什么时网站 网站就是利用Html工具制作用于展示特定内容的网页集合,网站也是一种软件. 网站的开发过程需要考虑其完整性.目的性.扩展性和安全性. 2.C/S架构跟B/S架构 C/S架构:客户端和服 ...