backbonejs上传文件

       2017年了,转眼就30岁了,时间真TM快。

       纵观这一年的改变,在得知跟自己相亲的人突然嫁给别人时,如五雷轰顶,咬牙离开了原来的地方,自己找了个单间住下,又咬牙决定学车,恰巧在年前无法考试。

      我心态的变化就是更加包容,更加阳光了,只是找不到对象。年年为这事发愁。

        好了,心声说完,开始说正事。

============================我是正经的分割线===========

        如果用表单提交数据,我们往往使用$('#postForm').serialize()$('#postForm').serializeArray()来获取序列化数据。

     $.ajax({
     	url : "http://localhost:8080/STS/rest/user",
     	type : "POST",
     	data : $( '#postForm').serialize(),
     	success : function(data) {
          $( '#serverResponse').html(data);
     	},
     	error : function(data) {
          $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
     	}
     });

       不过,上传文件时,file无法通过序列化来获取。

        可以使用html5的FormData:  var post_data = new FormData();,需要注意的是FormData是XMLHttpRequest Level 2的新特性,jquery1.X的版本不支持。

        ===========================================可以开始了=======

        模板index.html

        

  上面非常重要的是enctype="multipart/form-data",


      js处理文件上传 

	    var file_data = new FormData();
            var upload_form = $(e.currentTarget).closest("form");
            var template_type = $(upload_form).find("#template_type").val();
            var excel_file = $("#excel_file")[0].files.item(0);
            file_data.append("data", JSON.stringify({"template_type":template_type}));
            file_data.append("file", excel_file);
            var new_model = new CommonModel();      //这里你需要导入一个已经写好的model,不清楚的自己看看backbonejs教程        
            new_model.url = this.collection.url;
            new_model.save(null, {data:file_data, contentType:false, processData:false, success:function (model, response) {
                console.log(response);
            }})

         django处理请求

         django的request接受的方式有request.POST, request.read(), request.FILES。

         上段代码的参数,"template_type"需要request.read()读取,"file"需要request.FILES读取。

         具体代码就不写了。

         ==========================================其实已经完了=======

         那段backbonejs处理参数的代码,是封装了ajax的方法,如果用原生的ajax,我提供一个例子,只是例子,

        

     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  

        FormData详细介绍的一篇文章:https://segmentfault.com/a/1190000006716454

你可能感兴趣的:(django,html,backbonejs)