ajax以及文件上传的几种方式

方式一:通过form表单中,html input 标签的“file”完成

# 前端代码uoload.html
    <form method="post" action="/upload/" enctype="multipart/form-data">
        <input id="user" type="text" name="user" />
        <input id=‘img‘ type="file" name="img" />
        <input type="submit" />
    </form>
# 后端代码
def upload(request):
    if request.method == ‘POST‘:
        ret = {‘status‘: False, ‘data‘: None, ‘error‘: None}
        try:
            user = request.POST.get(‘user‘)
            img = request.FILES.get(‘img‘)
            f = open(os.path.join(‘static‘, img.name), ‘wb‘)
            for chunk in img.chunks(chunk_size=1024):
                f.write(chunk)
            ret[‘status‘] = True
            ret[‘data‘] = os.path.join(‘static‘, img.name)
        except Exception as e:
            ret[‘error‘] = e
        finally:
            f.close()
            return HttpResponse(json.dumps(ret))
    return render(request, ‘upload.html‘)

方法二:利用XmlHttpRequest对象,发送原生的Ajax请求

(这种方法不能发送文件,需要依赖另外一个对象FormData)

# 方法
a. void open(String method,String url,Boolen async)
   用于创建请求

   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)

b. void send(String body)
    用于发送请求

    参数:
        body: 要发送的数据(字符串类型)

c. void setRequestHeader(String header,String value)
    用于设置请求头

    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)

d. String getAllResponseHeaders()
    获取所有响应头

    返回值:
        响应头数据(字符串类型)

e. String getResponseHeader(String header)
    获取响应头中指定header的值

    参数:
        header: 响应头的key(字符串类型)

    返回值:
        响应头中指定的header对应的值

f. void abort()

    终止请求

# 属性
a. Number readyState
   状态值(整数)

   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;

b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)

c. String responseText
   服务器返回的数据(字符串类型)

d. XmlDocument responseXML
   服务器返回的数据(Xml对象)

e. Number states
   状态码(整数),如:200、404...

f. String statesText
   状态文本(字符串),如:OK、NotFound...

XmlHttpRequest对象的主要属性和方法

XmlHttpRequest对象的主要属性和方法

<input type="button" value="XMLHttpRequest按钮" onclick="XHRAjax();">

<script>
        function XHRAjax() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () { # 回调函数--每当请求变化时,都会被触发,比如:创建、open、send、recv等。
                if(xhr.readyState == 4){   # 仅当服务器数据全部返回时触发
                    var data = xhr.responseText;
                    console.log(data)
                }
            };
            // GET请求
            // xhr.open(‘GET‘, ‘/xhr_ajax?p=123‘);
            // xhr.send();
            // POST请求
            xhr.open(‘POST‘, ‘/xhr_ajax/‘);  # 这里的URL必须加斜杠结尾。 发送post请求的时候必须携带请求头
            xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
            // 发送请求
            xhr.send(‘n1=1;n2=2;‘);
        };
</script>
def ajax(request):
    import time
    current_time = time.time()
    return render(request, ‘ajax.html‘, {‘current_time‘: current_time})

上述的内容,已经可以完成原生ajax的发送。 如果需要发送文件,则需要借助于FormData对象.下边介绍一下FormData的简单用法

# 前端代码

<input type="button" value="XMLHttpRequest-FormData按钮" onclick="XHRAjaxForm();">
# 后端代码: 基于FormData对象发送请求
function XHRAjaxForm() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    var data = xhr.responseText;
                    console.log(data)
                }
            };
            xhr.open(‘POST‘, ‘/xhr_ajax/‘);
            // 发送请求
            var form = new FormData();  # 创建FormData对象
            form.append(‘user‘, ‘alex‘);
            form.append(‘pwd‘, ‘123‘);
            xhr.send(form);
        };

上面的例子,简单的介绍了FormData的用法 。下边的案例介绍如何使用formdate对象来上传文件

 前端部分
<a onclick="uploadfile1();" style="cursor: pointer; display: inline-block;background-color: aqua">XMLHttpRequet上传</a>

# JS部分
<script>
      function uploadfile1() {
            var form = new FormData();
            form.append(‘user‘, document.getElementById(‘user‘).value);

            var fileobj = document.getElementById(‘img‘).files[0];
            form.append(‘img‘, fileobj);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    var data = xhr.responseText;
                    console.log(data)
                }
            };
            xhr.open(‘post‘, ‘/upload/‘, true)
            xhr.send(form);
        }
</script>

方法三:利用JQuery Ajax + FormData进行文件上传

Jquery转换为dom对象:$("#img")[0].files[0];   其中$("#img")是jquery对象, $("#img")[0]是dom对象

<a onclick="uploadFile2();" style="cursor: pointer; display: inline-block;background-color: aqua">JQuery-Ajax上传</a>

<script>

        function uploadFile2() {
            var fileobj = $("#img")[0].files[0];
            console.log(fileobj);
            var form = new FormData();
            form.append("img", fileobj);
            form.append("uesr", ‘alex‘);
            $.ajax({
                type: ‘POST‘,
                url: ‘/upload/‘,
                data: form,
                processData: false, # 告诉jquery要传输data对象
                contentType: false,   # 告诉jquery不需要增加请求头对于contentType的设置
                success: function (arg) {
                    console.log(arg)
                }
            })
        }
</script>

方法四:基于Iframe 实现伪Ajax 上传文件

<a onclick="uploadFile3();" style="cursor: pointer; display: inline-block;background-color: aqua">IFrame上传</a>

<script>
        function uploadFile3() {
            // target 是个name的属性值,而不是id
            $("#container").find(‘img‘).remove();
            document.getElementById("my_iframe").onload = callback;
            document.getElementById(‘fo‘).target = ‘my_iframe‘;
            document.getElementById(‘fo‘).submit();
        }
        function callback() {
            var t = $(‘#my_iframe‘).contents().find(‘body‘).text();
            var json_data = JSON.parse(t);
            console.log(json_data);
            if(json_data.status){
                // 上传成功
                var tag = document.createElement(‘img‘);
                tag.src = "/" + json_data.data;
                tag.className = ‘img‘;
                $(‘#container‘).append(tag);

            }else{
                // 上传失败
                console.log(status.error);
            }

        }
</script>

不是所有的浏览器都可以兼容FormData对象。为了兼容性,引出iframe 的用法。

  iframe可以建立一个通道发送请求,利用iframe局部刷新的特性实现目标。

# 前端代码
<iframe name="my_iframe" style="display: none;" src=""></iframe>
# 这里使用的是name标签,和id标签无关

<a onclick="uploadFile3();" style="cursor: pointer; display: inline-block;background-color: aqua">IFrame上传</a>

<div id="container"></div>

    <script>
        function uploadFile3() {
            // target 是个name的属性值,而不是id
            $("#container").find(‘img‘).remove();
            document.getElementById("my_iframe").onload = callback; # 通过js手动绑定一个事件
            document.getElementById(‘fo‘).target = ‘my_iframe‘;   # 这里target对应的是一个iframe 的name属性
            document.getElementById(‘fo‘).submit();
        }
        function callback() {
            var t = $(‘#my_iframe‘).contents().find(‘body‘).text();
            var json_data = JSON.parse(t);
            console.log(json_data);
            if(json_data.status){  
                // 上传成功
                 var tag = document.createElement(‘img‘);
                tag.src = "/" + json_data.data;
                tag.className = ‘img‘;
                $(‘#container‘).append(tag);

            }else{
                // 上传失败
                console.log(status.error);
            }

        }

</script>

原文地址:https://www.cnblogs.com/jeavy/p/10898885.html

时间: 2024-10-22 01:34:41

ajax以及文件上传的几种方式的相关文章

Java文件上传的几种方式

文件上传与文件上传一样重要.在Java中,要实现文件上传,可以有两种方式: 1.通过Servlet类上传 2.通过Struts框架实现上传 这两种方式的根本还是通过Servlet进行IO流的操作. 一.通过Servlet类上传 1.编写Sevlet类 package com.chanshuyi.upload; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.

文件上传的三种方式-Java

前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践. 一.Http协议原理简介 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HT

SpringMVC文件上传的两种方式

搞JavaWEB的应该或多或少都做过文件上传,之前也做过简单的上传,但是如下的需求也确实把我为难了一把: 1.上传需要异步, 2.需要把上传后文件的地址返回来, 3.需要进度条显示上传进度. 项目使用SpringMVC架构+easyUI,初步分析,进度条可以使用easyui自带的进度条,上传可以使用ajaxFileUpload或者ajaxForm.文件传上去,然后把路径带回来是没问题的,关键是上传进度怎么获取.最终,两种方式都实现啦. 首先,不管哪种方式,后台对文件处理都是必须的.文件处理: 1

利用Selenium实现图片文件上传的两种方式介绍

在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当开发直接使用file类型的input实现图片文件的上传时,实例:<input type="file" name=''filename"> 我们可以直接利用Selenium提供的方法实现文件上传,但是因为依赖开发的实现,而且目前实现基本都会利用框架,所以这种实现方式有很

关于文件上传的几种方式

上传之前 JavaScript 检测 1:javascript判断上传文件的大小: 在FireFox.Chrome浏览器中可以根据document.getElementById(“idoffile”).size 获取上传文件的大小(字节数),而IE浏览器中不支持该属性,只能借助标签的dynsrc属性,来间接实现获取文件的大小(但需要同意ActiveX控件的运行). var ua = window.navigator.userAgent; if (ua.indexOf("MSIE")&g

django文件上传的几种方式

方式一:通过form表单中,html input 标签的“file”完成 1 2 3 4 5 6 # 前端代码uoload.html     <form method="post" action="/upload/" enctype="multipart/form-data">         <input id="user" type="text" name="user&quo

python文件上传的三种方式

def upload(request): return render(request, 'upload.html') def upload_file(request): username = request.POST.get('username') fafafa = request.FILES.get('fafafa') with open(fafafa.name, 'wb') as f: for item in fafafa.chunks(): f.write(item) print(user

ASP.NET Core 1.0中实现文件上传的两种方式(提交表单和采用AJAX)

Bipin Joshi (http://www.binaryintellect.net/articles/f1cee257-378a-42c1-9f2f-075a3aed1d98.aspx) Uploading files is a common requirement in web applications. In ASP.NET Core 1.0 uploading files and saving them on the server is quite easy. To that end

文件上传的三种模式-Java

转载自: http://www.myexception.cn/web/1935104.html 文件上传的三种方式-Java 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践.该博客重在实践.   一. Http协议原理简介     HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经