Ajax上传文件 (JQuery Ajax&原生Ajax)

最新推荐文章于 2023-02-22 14:25:55 发布

Mcdull93

最新推荐文章于 2023-02-22 14:25:55 发布

阅读量855

点赞数

分类专栏： AJAX 文章标签： ajax upload

本文链接：https://blog.csdn.net/maidou931019/article/details/74615583

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax 上传文件
- 原生Ajax
- JQuery Ajax

原生Ajax

# views.py
def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        print(request.POST,request.FILES)
        file_obj = request.FILES.get('fafafa')
        import os
        file_path = os.path.join('static',file_obj.name)
        with open(file_path,'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse(file_path)


# upload.html
<body>

    <h3>原生Ajax上传文件</h3>
    <input type="file" id="il1">
    <a onclick="upload1();">上传</a>
    <div id="content"></div>

    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        function upload1() {
            var formData = new FormData();
            formData.append('k1','v1');
            formData.append('fafafa',document.getElementById('il1').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    var file_path = xhr.responseText;
                    alert(file_path)
                    var tag = document.createElement('img');
                    tag.src = '/' + file_path;
                    document.getElementById('content').appendChild(tag)
                }
            };
            xhr.open('POST','/upload/');
{#          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');#} // 如果send的是传formData对象就不用加这条，后台会对数据进行处理
            xhr.send(formData);
        }
    </script>

</body>

JQuery Ajax

# views.py

def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        print(request.POST,request.FILES)
        file_obj = request.FILES.get('fafafa')
        import os
        file_path = os.path.join('static',file_obj.name)
        with open(file_path,'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse(file_path)


# upload.html
<body>

    <h3>jQuery Ajax上传文件</h3>
    <input type="file" id="il2">
    <a onclick="upload2();">上传</a>
    <div id="content2"></div>



    <script src="/static/jquery-3.2.1.js"></script>
    <script>

        function upload2() {
            var formData = new FormData();
            formData.append('k1','v1');
            formData.append('fafafa',$('#il2')[0].files[0]);

            $.ajax({
                url: '/upload/',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false, // 告知jQuery不要加那些请求头对数据进行处理，把原生的formData传过去
                success:function (arg) {
                    alert(arg);
                    var tag = document.createElement('img');
                    tag.src = '/' + arg;
                    document.getElementById('content').appendChild(tag)


                }

            })

        }
    </script>

</body>

Mcdull93

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax上传文件 (JQuery Ajax&原生Ajax)

Ajax 上传文件原生AjaxJQuery Ajax原生Ajax# views.pydef upload(request): if request.method == 'GET': return render(request,'upload.html') else: print(request.POST,request.FILES)
复制链接

扫一扫

专栏目录