ajax文件上传

h259077

于 2022-12-04 22:39:09 发布

阅读量77

点赞数 1

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/h259077/article/details/128178457

版权

 function fileChange(){//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
           alert("change");
            $.ajaxFileUpload({
                url: "${pageContext.request.contextPath}/prod/ajaxImg.action",//用于文件上传的服务器端请求地址
                secureuri: false,//一般设置为false
                fileElementId: 'pimage',//文件上传控件的id属性  <input type="file" id="pimage" name="pimage" />
                dataType: 'json',//返回值类型 一般设置为json
                success: function(obj) //服务器成功响应处理函数
                {
                	alert(obj);
                    $("#imgDiv").empty();  //清空原有数据
                    //创建img 标签对象
                    var imgObj = $("<img>");
                    //给img标签对象追加属性
                    imgObj.attr("src","${pageContext.request.contextPath}/image_big/"+obj.imgurl);
                    imgObj.attr("width","100px");
                    imgObj.attr("height","100px");
                    //将图片img标签追加到imgDiv末尾
                    $("#imgDiv").append(imgObj);
                    //将图片的名称（从服务端返回的JSON中取得）赋值给文件本框
                    //$("#imgName").html(data.imgName);
                },
                error: function (e)//服务器响应失败处理函数
                {
                    alert(e.message);
                }
            });

//ajax异步文件上传
    @RequestMapping("/ajaxImg.action")
    @ResponseBody
    public Object ajaxImg(MultipartFile pimage,HttpServletRequest request){
        //提取生成文件名UUID+上传图片的后缀 。jps 。png
        String saveFileName= FileNameUtil.getUUIDFileName()+
                FileNameUtil.getFileType(pimage.getOriginalFilename());

        //得到项目中图片存储的路径
       String path=request.getServletContext().getRealPath("/image_big");

       //转存 E:\idea_workspace\mimissm/image_big   + \  +  uuid.tostring.replace
        try {
            pimage.transferTo(new File(path+File.separator+saveFileName));
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

        //返回客户端json对象 封装图片的路径 为了在页面实现立即回显
       /* JSONPObject object=new JSONPObject();*/
          JSONObject object=new JSONObject();
        /*object.put("imgurl",saveFileName);*/
        object.put("imgurl",saveFileName);
        
        return object.toString();
    }

public class FileNameUtil {
	//根据UUID生成文件名
	public static String getUUIDFileName() {
		UUID uuid = UUID.randomUUID();
		return uuid.toString().replace("-", "");
	}
	//从请求头中提取文件名和类型
	public static String getRealFileName(String context) {
		// Content-Disposition: form-data; name="myfile"; filename="a_left.jpg"
		int index = context.lastIndexOf("=");
		String filename = context.substring(index + 2, context.length() - 1);
		return filename;
	}
	//根据给定的文件名和后缀截取文件名
	public static String getFileType(String fileName){
		//9527s.jpg
		int index = fileName.lastIndexOf(".");
		return fileName.substring(index);
	}