js - java 上传文件

 

 

---

方法一：

FormData

模拟创建一个表单，

 

 

<input type="file" id="fileUrl" name="fileUrl" >

 

 

//上传控件

var filePoint = $('#fileUrl');

//表单对象

var formData = new FormData();

formData.append('file', filePoint[0].files[0]);

formData.append('cityId', cityId);

$.ajax({

    type:"post",

    url:"/test/1",

    enctype: 'multipart/form-data',

    async:true,

    contentType: false,    //这个一定要写

    processData: false, //这个也一定要写，不然会报错

    data:formData,

    dataType:'json',    //返回类型，有json，text，HTML。这里并没有jsonp格式，所以别妄想能用jsonp做跨域了。

    success:function(data){

}，

error:function(){

},

 

后端java

 

 

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

 

@RequestMapping("/1")

@ResponseBody

public Object analyseXls(MultipartHttpServletRequest multipartRequst) {

    BackMsgEntity backMsg = new BackMsgEntity();

 

    if(multipartRequst == null){

        backMsg.setMsg("服务请求失败，请重试");

        log.error("服务请求失败,MultipartHttpServletRequest空指针");

        return backMsg;

    }

    MultipartFile fileLink = multipartRequst.getFile("fileUrl");

    String fileName = fileLink.getOriginalFilename();       //文件名

    String cityId = multipartRequst.getParameter("cityId"); //登录账号省份

 

    //存文件

  fileLink.transferTo(new File(fileUrl));

 

}

transferTo() 方法会自动覆盖已存在的文件，经试验采用的应该是TCP/IP协议

 

---

方法二：

    ajaxSubmit

    需要引入 jquery-form.js    我用的是jquery-form.mini.js

 

    需要form表单

 

<form id="fileForm" onsubmit="return uploadFile();">

    <input type="file" id="fileUrl" name="fileUrl" >

    <input type="hidden" value="SC" name="cityId" id ='cityId'>

</form>

<button onclick="uploadFile()">上传xls文件</button>

input 一定要加上name属性，因为后台是更具name值来读取变量的。

 

 

function uploadFile(){

 

var fileForm= $("#fileForm");

 

fileForm.ajaxSubmit({

    url: "/test/1",

    type: 'post',

    dataType: 'json',

    success: function(data){

        if(data.flag == 1){

            toastr.success(data.msg);

        } else {

            toastr.error(data.msg);

        }

    },

    error: function(data){

        toastr.error('请求服务异常！');

    }

});

return false;

 

}

返回 false 阻止工单提交导致的跳转刷新

 

后台同“方法一”