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

	<form role="form" id="import-excel-form" enctype="multipart/form-data">
            <div class="form-group">
                <label for="template_type">选择设备分类:</label>
                <input type="input" id="template_type" />
            </div>
            <div class="form-group">
                <label for="excel_file">选择文件:</label>
                <input type="file" name="excel_file" class="form-control"  id="excel_file" />
            </div>
            <div class="form-group">
                <input type="button" class="btn btn-primary" id="btn-import-excel"  value="上传"/>
            </div>
        </form>

  上面非常重要的是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);  
          }  
     });