Ajax之文件上传处理

原创 2017年11月15日 08:22:02

前台处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery3.2.1.js"></script>
    <script src="/static/dist/sweetalert2.all.min.js"></script>
    <link rel="stylesheet" href="/static/dist/sweetalert2.min.css">
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <script>
        $(function () {
            var formData = new FormData();
            formData.append('file', $('#file')[0].files[0]);
            $('#sbt').click(function () {
                $.get({
                    url: '/get_result/',
                    data: formData,
                    done: function (data) {
                        alert('hello,jj')
                    },
                    fail: function () {
                        alert('失败')
                    }
                })
            })
        })

    </script>
</head>
<body>
<form action="/get_result/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>文件<input type="file" name="file" id="file"></p>
    <input type="submit" value="提交" id="sbt">
</form>

</body>
</html>

后台处理

def get_result(request):

    with open(request.FILES.get('file').name, 'wb') as f:
        for item in request.FILES.get('file'):
            f.write(item)
    return HttpResponse('OK')

关键点在于:

前台通过$('#file')[0].files[0]获取上传的文件对象,后台通过request.Files.get('file')获取文件对象。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ajax异步文件上传,servlet处理

  • 2016年07月06日 08:28
  • 192KB
  • 下载

Ajax异步文件上传与NodeJS express服务端处理

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件...
  • hongchh
  • hongchh
  • 2017年03月30日 22:11
  • 1773

利用隐藏iframe处理文件上传,本页不刷新,仿ajax

简述: 经常遇到文件上传的一些前端功能,例如:会员头像编辑,身份证等证件的上传等等; 而这时需要在当前页面完成整个上传过程,不刷新不跳转,就可以用到这个原理。 在页面中嵌入一个隐藏的iframe...

ajax文件上传无刷新处理

最近在做开发的时候,碰到需要做个图片上传的功能,原先使用的是submit提交,但是这样会导致处理上的一些失误。如:前台页面的信息已经提示,但是其实后台还未完成程序的运转。        后来请教了同...

ajax异步文件上传,servlet处理,含demo

ajax上传组件源自于http://www.phpletter.com/Demo/AjaxFileUpload-Demo/,用的jquery 不过它服务器端用的是php,原理都是一样的,我改成了jav...
  • thc1987
  • thc1987
  • 2013年11月11日 18:02
  • 30476

js ajax文件上传

  • 2016年09月26日 01:06
  • 2KB
  • 下载

Jquery 的ajax实现文件上传,校验。

Html代码: ...

php+ajax文件上传

  • 2015年01月08日 21:55
  • 182KB
  • 下载

html5+ajax文件上传struts2接收

  • 2015年09月17日 20:29
  • 76KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax之文件上传处理
举报原因:
原因补充:

(最多只允许输入30个字)