使用ajaxSubmit异步上传图片并展示

来源：互联网发布：win7 telnet 端口编辑：程序博客网时间：2024/06/04 20:05

页面在选择图片完成后将图片上传到图片服务器，并在页面显示图片，然后将上传图片的路径加载到隐藏域中，提交表单时将路径保存到数据库。
页面代码：

<script>function submitUpload(){    var option = {            url:"${path}/upload/uploadPic.do",//如果不指定url那么就使用使用提交表单的url，如果指定就使用当前的url            dataType:"text",            success:function(responseText){                var jsonObj = $.parseJSON(responseText);                $("#imgsImgSrc").attr("src", jsonObj.realPath);                $("#imgs").val(jsonObj.relativePath);            },            error:function(){                alert("系统错误");            }    };    $("#form").ajaxSubmit(option);}</script>

<form id="form" name="form" action="${path }/add.do" method="post" enctype="multipart/form-data">    <input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()' /><span id="submitImgTip" class="pos">请上传图片宽为120px，高为50px，大小不超过100K。</span>    <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲！您忘记上传图片了。" /><span></span></form>

java代码：

    @RequestMapping("/uploadPic.do")    public void uploadPic(HttpServletRequest request, Writer out) throws IOException{        //把request转换成复杂request        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;        //获得文件，此方法实用性强，可以多文件复用。        Map<String, MultipartFile> map = mr.getFileMap();        Set<String> set = map.keySet();        Iterator<String> it = set.iterator();        String fileInputName = it.next();        MultipartFile mf = map.get(fileInputName);        //获得文件的字节数组        byte [] bs = mf.getBytes();        String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());        Random random = new Random();        for(int i = 0; i < 3; i++){            fileName = fileName + random.nextInt(10);        }        String oriFileName = mf.getOriginalFilename();        //获得文件的后缀        String suffix = oriFileName.substring(oriFileName.lastIndexOf("."));        //获得上传文件的绝对路径        String realPath = ECPSUtils.readProp("file_path")+"/upload/"+fileName+suffix;        //获得相对路径        String relativePath = "/upload/"+fileName+suffix;        //创建jersy的客户端        Client client = Client.create();        //创建web资源对象        WebResource wr = client.resource(realPath);        //上传        wr.put(bs);        JSONObject jo = new JSONObject();        jo.accumulate("realPath", realPath);        jo.accumulate("relativePath", relativePath);        String result = jo.toString();        out.write(result);    }

谢谢！

0 0