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实现文件上传

1 . 先看效果(这个效果需要添加Ace的css,这里就不提供源代码了) 2. 导入上传所需的jar包 3 . 配置servlet.xml(不是web.xml) ...
  • A13432421434
  • A13432421434
  • 2017年05月17日 11:42
  • 383

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

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

简单的jquery ajax文件上传功能

/* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(ima...
  • tongdengquan
  • tongdengquan
  • 2016年11月15日 14:10
  • 799

SSH2下使用ajaxFileUpload控件上传附件

在SSH2架构中,使用ajaxFileUpload控件上传附件有较好的
  • jrn1012
  • jrn1012
  • 2014年05月02日 19:07
  • 3038

Springmvc下一次选多个文件上传(二)Ajax异步

通过Ajax异步一次选中多个图片上传: springmvc.xml
  • zhouhaisunny
  • zhouhaisunny
  • 2017年04月05日 13:53
  • 438

ajax文件上传无刷新处理

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

PHP + jQuery Ajax文件无刷新上传文件

PHP + jQuery Ajax文件上传实例。因为看到一些朋友询问如何实现PHP环境下的网页上传功能,自己这几天刚用了jQuery_upload_multiple上传插件,所以在这里把用法给大家说一...
  • longjef
  • longjef
  • 2016年10月21日 20:10
  • 564

SpringMVC Ajax上传文件实例

做了一个文件上传模块,因为传统的form提交会有页面刷新,不符合我的使用要求,所以我采用Ajax提交方式,这里说明下,我的应用程序前端为Ajax提交,后端SpringMVC接收处理。传统form提交文...
  • irokay
  • irokay
  • 2017年06月10日 14:33
  • 2109

jquery+ajax+struts实现文件上传

首先在前段引入jquery.js和ajaxfileupload.js文件,一般引入放在最后面,这样可以通过jquery的jQuery.noConflict();方法避免冲突,其中jquery.js和a...
  • topwqp
  • topwqp
  • 2013年01月08日 09:39
  • 7967

html+AJAX+ashx 上传图片总结

HTML页面部分代码
  • a110658684
  • a110658684
  • 2017年03月07日 17:42
  • 389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax之文件上传处理
举报原因:
原因补充:

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