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文件

{# #}

在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 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表单提交

Form提交

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文件流数据，前端转图片预览不可下载

使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...

随机推荐

D3.js学习(三)

上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

JQUERY删除操作

var path = '/baseReorganizeController/deleteBaseReorganize';      ...

C# redis使用之ServiceStack

需要注意的是:ServiceStack.Redis 中GetClient()方法,只能拿到Master redis中获取连接,而拿不到slave 的readonly连接.这样 slave起到了冗余备份 ...

window和nodejs作用域区别(待续)

//这是在浏览器环境下,chrome下 var n =2 ; var obj={ n:4, fn1:(function(){ console.log("fn1->this =&quot ...

PHP 增删改查 import！！

主页面

主页面family

Hibernate各种主键生成策略2

先来看看主键映射的标签:

[译]ASP.NET Core 2.0 路由引擎

问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(ISe ...

[Swift]LeetCode36. 有效的数独 | Valid Sudoku

Determine if a 9x9 Sudoku board is valid. Only the filled cells need to be validated according to th ...

Webform--LinQ 分页组合查询

一.linq高级查 1.模糊查(字符串包含) public List Select(string name) { return con.User.Where(r => r ...

iOS架构设计系列之解耦的尝试之变异的MVVM

最近一段时间,在思考如何合理的架构一个可扩展性良好的界面编程方式.这一部分的成果做成了一个叫ElementKit的库.目前功能在不断的完善中. 关于iOS的架构,看多了MVVM,VIPER,MVC,M ...