无刷新文件上传之一:传统iframe实现
要求:无刷新文件上传,验证图片格式,验证图片尺寸。
先建立一个表单页面:
<body> <form name="form1" action="/customer/login.do" method="post" id="form1" enctype="multipart/form-data" target="hidden_frame"> <input name="file_img" type="file" value="" id="file_img" />
<input type="submit" value="上传" name="upload" onclick="checkImage();" /> </form> <p>提示:小于100K jpg、png、gif图片,图片尺寸:960*100</p> <div> <p class="tip">文件正在上传...</p> <img id="show_img" style="display: none;" src="" /> </div> <iframe name='hidden_frame' id="hidden_frame" style='display: none;'></iframe> </body>
当点击上传的时候,调用checkImage()方法,验证图片。如果通过,执行上传:
<script type="text/javascript"> /** 验证上传图片信息,并将图片提交到后台 1、验证图片格式 2、验证图片尺寸 3、验证图片大小(如果大小不符,则提示;如果成功,则显示图片) */ function checkImage() { var img, //待要上传的图片 fileName = $('#file_img').val(), //图片名称 fileType, //图片类型 img_tag = $('#show_img'), //要显示的图片标签 tip = $('.tip'), //提示标签 check = true; //一个条件变量 fileType = fileName.substring(fileName.lastIndexOf('.') + 1); //1、 if (check && fileType != 'jpg' && fileType != 'png' && fileType != 'gif') { check = false; alert('图片格式不正确'); } //2、 if (check) { img = new Image(); var src_img = 'file:///' + fileName; img_tag.attr('src', src_img); img.src = src_img; if (img.width != 960 || img.height != 100) { check = false; alert('图片尺寸不符合规定!'); } } //3、 if (check) { $('#form1').submit(); tip.show(); } } //后台返回后的回调函数 function callback(s) { if (s == 'err') { $('.tip').hide(); alert('图片必须小于100k'); } else if (s == 'success') { $('#show_img').show(); tip.hide(); } } </script>
这时候,表单提交到了iframe中,页面是没有刷新的。
后台我们struts2的upload插件实现文件自动转换,然后把内存中的文件取出放到指定位置:
public class LoginAction extends BaseAction { //文件 private File file_img; //文件名 private String file_imgFileName; //文件类型 private String file_imgContentType; ...省略getter、setter
public String login() { String add = SUCCESS; if (file_img.length() > 100 * 1024) { add = outAjaxResult("<script>parent.callback('err');</script>"); } else { boolean b = file_img.renameTo(new File("E:\\1.png")); System.out.println(b); add = outAjaxResult("<script>parent.callback('image.do');</script>"); } return add; } }
在后台输出一段script,以便于调用前台的回调函数:callback();
注:
1、JavaScript内置Image对象,可以使用这个对象获得图片的信息。
2、struts2接受文件,在文件字段名后面加Filename,则自动把前台文件名放如指定字段。加ContentType,则自动把前台文件类型放入指定字段。
3、此处实现的功能是:图片上传完成后,前台要显示上传的文件。我实现的思路是:后台返回一个action地址作为img标签地址,然后根据这个地址获得图片流信息,显示图片。链接地址:http://www.cnblogs.com/china-li/archive/2012/12/03/2799390.html
放低自我,帮助旁人,却不求人前自夸!