基于jQuery的ajax文件上传

转载于https://www.cnblogs.com/12345huangchun/p/10243881.html

文件上传
　　在此处只列出本人可以理解的：
　　
　　1,请求头contentType：指的请求体的打包方式，总共有三种类型
　　
　　1.1 application/x-www-form-urlencoded

这是post请求方式最常见的打包方式，如果不进行设置，都会默认这种打包方式。浏览器的原生form表单，如果不设置enctype属性，就默认这种方式打包数据。

user=alex&pwd=123 这就是这种方式打包后的数据结构
　　1.2 multipart/from-data

基于form表单上传文件，就必须让form表单的enctype等于multipart/form-data

基于ajax上传文件时，我们就要用到Formdata类

$('.submit').click(function () {
     var formdata=new FormData();
     formdata.append('file',$('.file')[0].files[0]);     #插入上传文件的内容
     $.ajax({
         url:'/file/',
         type:'post',
         contentType:false,       #这一句和下一句是必须加上的
         processData:false,
         data:formdata,
         success:function (data) {
             $('.c1').html(data)
         }
     })
 })

1.3 application/json

在用ajax请求时，可以把contentType改成json，但此时的数据类型就必须json数据类型

如果不用Json类型打包的话，ajax也会默认urlencoded模式打包，数据书写格式为：

data：{user:'hh',pwd:123}

但当设置contentType=‘json’，此时数据打包方式就变了，数据必须是json格式，所以现在该如下面这样写

data：JSON.strinigfy({user:'hh',pwd:123})

2，基于form表单的文件上传
　　
　　2.1 HTML文件

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="file">
    <input type="submit">
</form>

3，基于ajax的文件上传
　　
　　3.1 HTML文件

 <input type="file" class="file">
 <input type="button" class="submit" value="submit">
 <p class="c1"></p>
 <script>
     $('.submit').click(function () {
         var formdata=new FormData();
         formdata.append('file',$('.file')[0].files[0]);
         $.ajax({
             url:'/file/',
             type:'post',
             contentType:false,
             processData:false,
             data:formdata,
             success:function (data) {
                 $('.c1').html(data)
             }
         })
     })
 </script>