python自动化之上传文件的3种方法和图片预览
ajax上传文件的三种方法
第一种xhr提交
function xhrSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[0];
var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_file/',true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 接收完毕
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
xhr.send(fd);
}
第二种jQuery的ajax提交
function jqSubmit(){
// $('#fafafa')[0]
var file_obj = document.getElementById('fafafa').files[0];
var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
$.ajax({
url: '/upload_file/',
type: 'POST',
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success:function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
}
jQuery的ajax默认会做字符拼接,为了能够让文件正常上传定义如下:
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
第三种就是利用ifram来进行上传文件
HTML文件
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" />
{# <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
</form>
在function只需要写这些就行
function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
})
}
views.py
def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa')
import os
img_path = os.path.join('static/imgs/',fafafa.name)
with open(img_path,'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code': True , 'data': img_path}
import json
return HttpResponse(json.dumps(ret))
文件上传预览
function changeUpalod(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
$('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data;
$('#preview').append(imgTag);
});
$('#form1').submit();
}
python自动化之上传文件的3种方法和图片预览的更多相关文章
- python webdriver api-上传文件的三种方法
上传文件: 第一种方式,sendkeys(),最简单的 #encoding=utf-8 from selenium import webdriver import unittest import ti ...
- GitHub常用上传文件的两种方法 附带常见的问题及Git安装教程
从早上下课到现在一直在琢磨如何给Github下载本地文件,中午饭都没吃.还好是解决了,感觉挺有成就感的.O(∩_∩)O哈哈~ 好哒 闲话不说,说重点. 一.git的安装 百度云:http://pan. ...
- ASP.NET MVC上传文件的几种方法
1.Form表单提交 <p>Form提交</p> <form action="@Url.Action("SavePictureByForm" ...
- JS实现上传图片的三种方法并实现预览图片功能
地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...
- ASP.Net中上传文件的几种方法
在做Web项目时,上传文件是经常会碰到的需求.ASP.Net的WebForm开发模式中,封装了FileUpload控件,可以方便的进行文件上传操作.但有时,你可能不希望使用ASP.Net中的服务器控件 ...
- ASP.NET上传文件的几种方法
//上传文件实例 if (fileDealer.HasFile)//判断文件是否存在 { string filepath = ""; ...
- net上传文件的三种方法
ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. Test.aspx关 ...
- SecureCRT 上传文件的两种方法 Zmodem、SFTP
Zmodem: 无论有xshell还是secureCRT连接linux的时. 默认都用一个zmodem可以帮助window和linux之间传输文件 很方便和实用的工具. 不过默认是无法使用的 需要安装 ...
- Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载
使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...
随机推荐
- C# SpinWait
其实SpinWait的code 非常简单,以前看过很多遍,但是从来都没有整理过,整理也是再次学习吧. 我们先看看SpinWait的一些评论或者注意点吧:如果等待某个条件满足需要的时间很短,而且不希望发 ...
- 第二十四天- 模块导入 import from xxx import xxx
# 模块:# 模块就是⼀个包含了python定义和声明的⽂件,⽂件名就是模块的名字加上.py后缀# 换句话说我们⽬前写的所有的py⽂件都可以看成是⼀个模块# 为何用模块:写大项目时,把相关的功能进⾏分 ...
- JavaWeb学习总结(十):Session简单使用
一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...
- 【代码笔记】iOS-获取现在的日历时间
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- php初学记
开始和结束标记 常用两种:<?php ?>,<script language="php"></script> 短标记:<? ?>,需 ...
- C# 新建文档CreateNewDocument
// Copyright 2010 ESRI// // All rights reserved under the copyright laws of the United States// and ...
- angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...
- SQLSERVER:PREEMPTIVE_OS_GETPROCADDRESS等待类型的困惑
SQLSERVER:PREEMPTIVE_OS_GETPROCADDRESS等待类型的困惑 翻译自:http://troubleshootingsql.com/2011/07/20/preemptiv ...
- linux centos6.5 网络配置
1.方法一.修改网络配置文件 ①cd /etc/sysconfig/network-scripts ②cp ifcfg-eth0 ./ifcfg-eth0.bak //修改前先备份 第一个以太网 ...
- 铁乐学Python_Day34_Socket模块2和黏包现象
铁乐学Python_Day34_Socket模块2和黏包现象 套接字 套接字是计算机网络数据结构,它体现了C/S结构中"通信端点"的概念. 在任何类型的通信开始之前,网络应用程序必 ...