ajax异步跨服上传图片

【Java】ajax异步跨服上传图片

环境配置

1.导入jar包

commos-io

commos-fileupload

jersey框架包

2.配置文件上传解析器

springmvc.xml

    <!-- 配置文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
    <!-- 设置文件上传最大容量5m -->
    <property name="maxUploadSize">
        <value>5242880</value>
    </property>
</bean>

注意：id一定要配置，底层通过id找解析器

3.创建新项目作为图片存储服务器

1.创建新tomcat服务器

2.修改端口

4.修改服务器写入权限

Serverts/Tomcat/web.xml

添加readonly：false

<servlet>
    <servlet-name>default</servlet-name>
    <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
    <init-param>
        <param-name>readonly</param-name>
        <param-value>false</param-value>
    </init-param>
</servlet>

页面编写

1.表单

<p><label></label>
    <img id='imgSize1ImgSrc' src='${picPath }${item.pic }'  height="100" width="100" />
    <input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
    <input type='hidden' id='imgSize1' name='pic' value='${item.pic}' reg="^.+$" tip="亲！您忘记上传图片了。" />
</p>

2.定义ajax异步函数

2.1导入并引入js

jquery.js

jquery.form.js

注意导入顺序，先导入jQuery再导入jQuery.form

2.2使用ajax上传图片

function submitImgSize1Upload(){
//上传图片流程：把图片流对象，放入request
//图片对象在表单中，提交表单
//ajax提交表单：$.post()
var option = {
        type:'post',
        url:'${pageContext.request.contextPath }/uploadPic.do',
        dataType:'text',
        data:{
            fileName:'imgSize1File'
        },
        success:function(data){
            //把json格式字符串转换成对象
            var obj = $.parseJSON(data);
            //图片回显，把图片地址设置img标签即可，图片里面回显
            $("#imgSize1ImgSrc").attr("src",obj.fullPath);
            //给input隐藏域标签设置一个图片服务器地址，提交保存数据库
            $("#imgSize1").val(obj.fullPath);
        }
    };
    //提交表单
    $("#itemForm").ajaxSubmit(option);

}

上传控制类

1.获取名称及扩展名

2.定义随机文件名

3.使用jesery客户端上传图片

4.图片回显

@RequestMapping("/upload/uploadPic")
public void upload(HttpServletRequest request,String fileName,PrintWriter out){
    System.out.println("1");
    //把request转换成多部件请求对象
    MultipartHttpServletRequest mh = (MultipartHttpServletRequest)request;
    //根据文件name属性名称获取文件对象
    CommonsMultipartFile file = (CommonsMultipartFile) mh.getFile(fileName);
    //获取名称
    String originalFilename = file.getOriginalFilename();
    //截取获取文件扩展名
    String extName = originalFilename.substring(originalFilename.lastIndexOf("."));

    //使用毫秒+随机数定义文件名
    long currentTimeMillis = System.currentTimeMillis();
    //定义保存的文件名
    String fn = currentTimeMillis+"";
    //添加随机数
    Random random = new Random();
    for(int i =0 ;i < 4; i++){
        fn += random.nextInt(10);
    }
    //添加扩展名
    fn += extName;

    //上传文件
    //跨服务器上传文件，使用jesery客户端
    Client client = Client.create();
    //指定远程服务器绝对路径
    WebResource resource = client.resource(Constants.IMAGE_HOST+"upload/"+fn);
    //上传文件
    resource.put(String.class,file.getBytes());

    //图片回显
    //把远程图片服务图片地址返回给页面ajax解析
    //获得图片地址
    String fullPath = Constants.IMAGE_HOST+"upload/"+fn;
    //将地址封装到json中去
    String jsonResult = "{\"fullPath\":\""+fullPath+"\"}";
    //将jsonResult打印出去
    out.println(jsonResult);
}  

问题

描述：图片上传时 403返回异常
原因：tomcat默认禁止上传，readonly没有配置
解决：配置readonly为false