同时重临图片名字和图表在服务器的门路,后端主导的开发格局举行前后端同盟开发时

  此前有在网上找ajax上传图片的素材,一大半的人写得都是用jQuery,不过在此处用JQuery就大才小用了,所以自己就和好写了,先上图。

一、跨域科普

Jsonp(JSON with Padding)是材料格式 json
的一种“使用情势”,能够让网页从其余网域获取资料。

  公海赌船网址 1

跨域,即跨站HTTP请求(Cross-site HTTP
request),指发起呼吁的资源所在域不一致于请求指向资源所在域的HTTP请求。

至于Jsonp更详细的资料请参见http://baike.baidu.com/view/2131174.htm,上面给出例子:

  由上图,首先点击下边的挑三拣四文件,在甄选图片之后,将会活动上传图片到服务器,并且重临图片名字和图片在服务器的路径,然后在页面呈现文件名字和图纸。

二、怎么着发生跨域

 

  源码:http://download.csdn.net/detail/nsguf/9851189

当使用前后端分离,后端主导的开发情势举行前后端同盟开发时,平日有如下情景:

一.客户端

  React中:

a、后端开发落成在服务器上举办安插并给前端API文档。

Html代码  公海赌船网址 2

 1 import React from 'react';
 2 import Http from './http'
 3 
 4 const URL = 'http://localhost:8080/fileuploadExample/UploadServlet';
 5 
 6 export default class App extends React.Component {
 7     constructor(props) {
 8         super(props);
 9 
10         this.state = {
11             uploadedFile: "",
12             uploadedFileGetUrl: ''
13         };
14     }
15 
16     error() {
17         alert('error')
18     }
19 
20     callback(result) {
21         this.setState({
22             uploadedFile: result.uploadedFile,
23             uploadedFileGetUrl: result.uploadedFileGetUrl
24         });
25     }
26 
27     handleImageUpload(e) {
28         e.preventDefault()
29         let file = e.target
30         Http.post(URL, file, this.callback.bind(this), this.error)
31     }
32 
33     render() {
34         return (
35             <div>
36                 <input type="file" onChange={this.handleImageUpload.bind(this)}/>
37                 <div>
38                     {this.state.uploadedFileGetUrl === '' ? null :
39                         <div>
40                             <p>{this.state.uploadedFile}</p>
41                             <img src={this.state.uploadedFileGetUrl} alt="你选择的图片"/>
42                         </div>}
43                 </div>
44             </div>
45         )
46     }
47 }

b、前端在地头开展支付并向远程服务器上安排的后端发送请求。

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"&gt;  
  2. <html>  
  3. <head>  
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>  
  5. <title>Insert title here</title>  
  6. <script type=”text/javascript” src=”resource/js/jquery-1.7.2.js”></script>  
  7. </head>  
  8. <script type=”text/javascript”>  
  9. $(function(){     
  10.     /*  
  11.     //简写形式,效果同样  
  12.     $.getJSON(“http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?“,  
  13.             function(data){  
  14.                 $(“#showcontent”).text(“Result:”+data.result)  
  15.     });  
  16.     */  
  17.     $.ajax({  
  18.         type : “get”,  
  19.         async:false,  
  20.         url : “http://app.example.com/base/json.do?sid=1494&busiId=101“,  
  21.         dataType : “jsonp”,//数据类型为jsonp  
  22.         jsonp: “jsonpCallback”,//服务端用于收纳callback调用的function名的参数  
  23.         success : function(data){  
  24.             $(“#showcontent”).text(“Result:”+data.result)  
  25.         },  
  26.         error:function(){  
  27.             alert(‘fail’);  
  28.         }  
  29.     });   
  30. });  
  31. </script>  
  32. <body>  
  33. <div id=”showcontent”>Result:</div>  
  34. </body>  
  35. </html>  

  自己包裹的Ajax代码:

c、在那种支付进度中,假使前端想要一边开发一边测试接口,就必要动用跨域的主意。

 二.服务器端

var Http = (function() {
    var http = {};
    if (typeof window.XMLHttpRequest === "undefined") {
        window.XMLHttpRequest = function() {
            // 如果是i5就用Microsoft,其他就用Msxml2
            return new window.ActiveXObject(navigator.userAgent
                    .indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP"
                    : "Msxml2.XMLHTTP");
        };
    }
    http.post = function(url, data,  callback, error) {
        if (typeof data === "function") {//data可以不穿值
            callback = data;
            data = null;
        }
        var timeout = setTimeout(function() {//超时设置
            error();
        }, 10000);
        var xhr = new XMLHttpRequest();
        xhr.open('post', url);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                clearTimeout(timeout);//清除超时
                if (xhr.status === 200){
                    //alert(xhr.responseText);
                    callback(JSON.parse(xhr.responseText));//调用回调函数
                } else {
                    error();
                }
                xhr = null;// 删除对象,防止内存溢出
            }
        };
        xhr.onerror = function() {//如果产生了错误
            clearTimeout(timeout);
            error();
        };
        xhr.send(http.formDataCode(data));
    };
    http.formDataCode = function(data) {
        var fd = new FormData();
        if (!data) {
            return null;
        }
        for ( var key in data) {
            if(data.files){
                var file=data.files[0];
                fd.append("image", file);
            }else{
                fd.append(key, data[key]);
            }
        }
        return fd;
    }
    return http;
})();

export default Http

三、解决方案

Java代码  公海赌船网址 3

  在java后台上传图片方面,网上有无数事例都可以用,我借鉴的是http://blog.csdn.net/thc1987/article/details/15341201这篇,有兴趣可以看一下:

1、JQuery+ajax+jsonp 跨域访问

  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5. import javax.servlet.http.HttpServletRequest;  
  6. import javax.servlet.http.HttpServletResponse;  
  7. import net.sf.json.JSONObject;  
  8. import org.springframework.stereotype.Controller;  
  9. import org.springframework.web.bind.annotation.RequestMapping;  
  10.   
  11. @Controller  
  12. public class ExchangeJsonController {  
  13. 公海赌船网址,    @RequestMapping(“/base/json.do”)  
  14.     public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
  15.        try {  
  16.         response.setContentType(“text/plain”);  
  17.         response.setHeader(“Pragma”, “No-cache”);  
  18.         response.setHeader(“Cache-Control”, “no-cache”);  
  19.         response.setDateHeader(“Expires”, 0);  
  20.         Map<String,String> map = new HashMap<String,String>();   
  21.         map.put(“result”, “content”);  
  22.         PrintWriter out = response.getWriter();       
  23.         JSONObject resultJSON = JSONObject.fromObject(map); //根据须求拼装json  
  24.         String jsonpCallback = request.getParameter(“jsonpCallback”);//客户端请求参数  
  25.         out.println(jsonpCallback+”(“+resultJSON.toString(1,1)+”)”);//重返jsonp格式数据  
  26.         out.flush();  
  27.         out.close();  
  28.       } catch (IOException e) {  
  29.        e.printStackTrace();  
  30.       }  
  31.     }  
  32. }   
package com.example;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    // 保存文件的目录
    private static String PATH_FOLDER = "/";
    // 存放临时文件的目录
    private static String TEMP_FOLDER = "/";

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UploadServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    @Override
    public void init(ServletConfig config) throws ServletException {
        // TODO Auto-generated method stub
        super.init();

        ServletContext servletCtx = config.getServletContext();
        // 初始化路径
        // 保存文件的目录
        PATH_FOLDER = servletCtx.getRealPath("/upload");
        // 存放临时文件的目录,存放xxx.tmp文件的目录
        TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp");
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin",
                "http://localhost:3000");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        request.setCharacterEncoding("utf-8"); // 设置编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        // 获得磁盘文件条目工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();

        // 如果没以下两行设置的话,上传大的 文件 会占用 很多内存,
        // 设置暂时存放的 存储室 , 这个存储室,可以和 最终存储文件 的目录不同
        /**
         * 原理 它是先存到 暂时存储室,然后在真正写到 对应目录的硬盘上, 按理来说 当上传一个文件时,其实是上传了两份,第一个是以 .tem
         * 格式的 然后再将其真正写到 对应目录的硬盘上
         */
        factory.setRepository(new File(TEMP_FOLDER));
        // 设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
        factory.setSizeThreshold(1024 * 1024);

        // 高水平的API文件上传处理
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            // 提交上来的信息都在这个list里面
            // 这意味着可以上传多个文件
            // 请自行组织代码
            List<FileItem> list = upload.parseRequest(request);
            // 获取上传的文件
            FileItem item = getUploadFileItem(list);
            // 获取文件名
            String filename = getUploadFileName(item);
            // 保存后的文件名
            String saveName = new Date().getTime()
                    + filename.substring(filename.lastIndexOf("."));
            // 保存后图片的浏览器访问路径
            String picUrl = request.getScheme() + "://"
                    + request.getServerName() + ":" + request.getServerPort()
                    + request.getContextPath() + "/upload/" + saveName;

            System.out.println("存放目录:" + PATH_FOLDER);
            System.out.println("文件名:" + filename);
            System.out.println("浏览器访问路径:" + picUrl);

            // 真正写到磁盘上
            item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的

            PrintWriter writer = response.getWriter();

            System.out.print("{");
            System.out.print("uploadedFile:"+ "\"" + filename + "\"");
            System.out.print(",uploadedFileGetUrl:\"" + picUrl + "\"");
            System.out.print("}");

            JSONObject result = new JSONObject();
            result.put("uploadedFile", filename);

            result.put("uploadedFileGetUrl", picUrl);
            writer.write(result.toString());
            writer.close();
        } catch (Exception e) {
            e.printStackTrace();
            /*
             * PrintWriter writer = response.getWriter(); writer.print("{");
             * writer.print("error:"+e.toString()); writer.print("}");
             * writer.close();
             */
        }
    }

    private FileItem getUploadFileItem(List<FileItem> list) {
        for (FileItem fileItem : list) {
            if (!fileItem.isFormField()) {
                return fileItem;
            }
        }
        return null;
    }

    private String getUploadFileName(FileItem item) {
        // 获取路径名
        String value = item.getName();
        System.out.println(value + ":value");
        // 索引到最后一个反斜杠
        int start = value.lastIndexOf("/");
        // 截取 上传文件的 字符串名字,加1是 去掉反斜杠,
        String filename = value.substring(start + 1);
        return filename;
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

Jsonp(JSON with Padding)是材料格式 json
的一种“使用形式”,可以让网页从其余网域获取资料。

以上java代码那里修改了这几点:

上面给出例子:

  1、插入response.setHeader(“Access-Control-Allow-Origin”,”http://localhost:3000“);
    response.setHeader(“Access-Control-Allow-Credentials”, “true”);

html 前端代码:

  那两行代码,进行跨域,当然,那几个或许不安全

[html]view
plain
copy

  2、

    

  JSONObject result = new JSONObject();
  result.put(“uploadedFile”, filename);

Insert title here    

  result.put(“uploadedFileGetUrl”, picUrl);
  writer.write(result.toString());

    

  在此地,页面和服务器之间使用json数据传输的

    

 本人第一次发布博文,请批评指正~~~

$(function(){       

 /*    

 //简写形式,效果一样    

$.getJSON(“http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?“,    

         function(data){    

             $(“#showcontent”).text(“Result:”+data.result)    

 });    

 */    

 $.ajax({    

     type : “get”,    

     async:false,    

url : “http://app.example.com/base/json.do?sid=1494&busiId=101“,    

     dataType : “jsonp”,//数据类型为jsonp    

     jsonp: “jsonpCallback”,//服务端用于吸纳callback调用的function名的参数    

     success : function(data){    

         $(“#showcontent”).text(“Result:”+data.result)    

     },    

     error:function(){    

         alert(‘fail’);    

     }    

 });     

});    

Result:    

劳动器端:

[java]view
plain
copy

import java.io.IOException;    

import java.io.PrintWriter;    

import java.util.HashMap;    

import java.util.Map;    

import javax.servlet.http.HttpServletRequest;    

import javax.servlet.http.HttpServletResponse;    

import net.sf.json.JSONObject;    

import org.springframework.stereotype.Controller;    

import org.springframework.web.bind.annotation.RequestMapping;    

@Controller    

public class ExchangeJsonController {    

@RequestMapping(“/base/json.do”)    

public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {    

try {    

response.setContentType(“text/plain”);    

response.setHeader(“Pragma”, “No-cache”);    

response.setHeader(“Cache-Control”, “no-cache”);    

response.setDateHeader(“Expires”, 0);    

Map map =new HashMap();     

map.put(“result”, “content”);    

     PrintWriter out = response.getWriter();         

JSONObject resultJSON = JSONObject.fromObject(map);//按照必要拼装json    

String jsonpCallback = request.getParameter(“jsonpCallback”);//客户端请求参数    

out.println(jsonpCallback+”(“+resultJSON.toString(1,1)+”)”);//再次回到jsonp格式数据    

     out.flush();    

     out.close();    

}catch (IOException e) {    

    e.printStackTrace();    

   }    

 }    

}    

2、通过评释的格局允许跨域

在Controller类或其方法上加@CrossOrigin评释,来使之辅助跨域。

举例:

[java]view
plain
copy

@CrossOrigin(origins = “*”, maxAge = 3600)  

@RestController  

@RequestMapping(“/User”)  

public class UserController {  

}  

其中origins为CrossOrigin的默许参数,即跨域来源,*即任何来源,也足以是其他域名。即可以以以下形式:

[java]view
plain
copy

@CrossOrigin(“http://test.com“)  

@CrossOrigin(origins=”http://test.com",maxAge=3600)  

该注明用于方法上,写法相同,处理时,SpringMVC会对类上标签和艺术上标签进行联合。

3、通过配备文件的措施允许跨域

在web.xml中添加如下配置:

[html]view
plain
copy

   

CorsFilter   

/*   

行使这么些Filter即可让整个服务器全局允许跨域。

翻阅全文

相关文章