通过Struts2、Ajax异步上传图片

jopen 7年前

1、下载JS插件jquery-1.4.2.min.js和 jquery.form.js

2、HTML中的form表单如下:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>//引入插件
<script type="text/javascript" src="js/jquery.form.js"></script>
<form id="form2" method="post" enctype="multipart/form-data">     <input id="fileupload" name="fileMaterial" type="file" />     <div id="message"></div>       <input type="button" class="right-button02"onclick="uploadImage()" value="上传" />    </form>      图片预览 <div id="showImage"></div>        3、在页面的js中写上如下代码:    </span><pre name="code" class="java"><span style="font-size:18px;">function uploadImage() {        $(document).ready(                        function() {                            var options = {                                url : "<%=path%>/material.action!ajaxGetImage.do",//跳转到相应的Action                                type : "POST",//提交方式                                dataType : "script",//数据类型                                success : function(msg) {//调用Action后返回过来的数据                                    alert(msg);                                    if (msg.indexOf("#") > 0) {                                        var data = msg.split("#");                                        var data = msg.split("#");                                                                            $("#message").html("<font color='red'>"+data[0]+data[2]+"</font>");                                                                            $("#showImage").html("<img src='<%=webBasePath%>"+data[1]+"'/>");                                    } else {                                        $("#message").html(msg);//在相应的位置显示信息                                    }                                }                            };                            $("#form2").ajaxSubmit(options);//绑定页面中form表单的id                            return false;                        });    }    </script>
$(document).ready()表示在直接加载        4、传到相应的Action,uploadFile.action    public class MaterialAction extends BasicAction{           private File fileMaterial;//Ajax获取图片文件,与控件type=File中的name属性一样           private String fileMaterialFileName;//Ajax获取图片文件名称,相应的name属性名称+FileName           -----------相应的get和set方法----------------              /**         * 通过Ajax获取图片信息         * @return         * @throws IOException          */        public String ajaxGetImage() throws IOException{            HttpServletResponse response=ServletActionContext.getResponse();            response.setContentType("text/plain");            response.setCharacterEncoding("utf-8");            if(fileMaterial!=null){                String fileName=UUID.randomUUID()+"."+getFileType(fileMaterialFileName);                String savePath=ServletActionContext.getServletContext().getRealPath("cookBookImage")+"/material/"+fileName;                ImageZipUtil.zipWidthHeightImageFile(fileMaterial, new File(savePath), 40, 40, 1.0f);//压缩图片上传的公共类                String imgUrl="cookBookImage/material/"+fileName;                response.getWriter().print("图片#"+imgUrl+"#上传成功!");//把相应的地址放到前台解析,通过#符号分割            }else{                response.getWriter().print("图片上传失败!");            }            return null;        }  
通过以上的方式,我们就可以通过页面无刷新,在Struts2中无需要进行页面跳转来进行图片上传!