ajax上传图片及跨域解决办法（未测试ie）

来源：互联网发布：淘宝人群标签是什么编辑：程序博客网时间：2024/06/05 10:22

1.ajax上传图片

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-1.11.3.min.js"></script></head><body><div id="uploadForm"><input id="file" type="file" name="userfile"/><button id="upload" type="button">upload</button></div></body></html><script type="text/javascript" >$(function () {$("#upload").click(function () {var formData = new FormData();formData.append('file', $('#file')[0].files[0]);$.ajax({url: 'http://xxx/uploadFile',type: 'POST',cache: false,data: formData,processData: false,contentType: false}).done(function(res) {}).fail(function(res) {});});}); </script>

2.ajax跨域

在服务器接收时，只需在response添加响应头Header("Access-Control-Allow-Origin", "*")即可

如：

java:

@RequestMapping(value = "/uploadFile")@ResponseBodypublic String saveApplication(HttpServletRequest request, HttpServletResponse response) {response.setHeader("Access-Control-Allow-Origin", "*");String result = "success";FileUpload fileUpload = new FileUpload();UserFile userFile = fileUpload.fileUpload("file", request, response);System.out.println(userFile);return result;}

===================================================================

ajax跨域解决，方式2，jsonp方式

前台：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript" src="http://bjzx.xdf.cn:80/scholarship/js/js/jquery-1.10.2.min.js"></script></head><body>     </body><script>        $(function() {$.ajax({   type : 'get',   async: false,   url : 'http://bjmx.xdf.cn/huodong/middleSchoolActivity',   dataType : 'jsonp',   jsonp: 'jsonpCallback',   jsonpCallback:'jsonpCallback',//让后台jsonpCallback参数固定为所填的值，否则是随字字符串   success : function(result){   console.log(result.result);   console.log(result.data);   },   complete: function(XMLHttpRequest, textStatus){   },   error : function(json,XMLResponse){ result = "返回信息：" + json + "错误码：" + XMLHttpRequest.status; console.log("错误信息：" + result);   }});});</script></html>

后台，java springmvc

@RequestMapping(value = "/xxx")@ResponseBodypublic String xxx (String jsonpCallback) {Map<String, Object> dataMap = new HashMap<String, Object>();String result = "success";try {List<Map<String, Object>> activityList = new ArrayList<Map<String,Object>>();//TODOdataMap.put("data", activityList);}catch (NumberFormatException e) {e.printStackTrace();result = "error";}dataMap.put("result", result);String resultStr = com.alibaba.fastjson.JSONObject.toJSONString(dataMap);return jsonpCallback + "(" + resultStr + ")";}

阅读全文

0 0