- 浏览: 124664 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
ArtShell:
没试过,就不要贴出来!误导别人
如何在Servlet或Action中获取PageContext -
wyxy2005:
ie下,$("#waiguan_add") ...
iframe实现图片异步上传 -
xiaopei0714:
可是我提取出的文本包含一堆的问号,可以设置编码吗?
HtmlParser提取网页中的纯文本信息 -
icylee:
我这样做在action里不行啊 总是提示action里没有ge ...
如何在Servlet或Action中获取PageContext -
it_weigang:
请教问题,如果是ajax的页面,信息如何抓取呢?例如 http ...
HtmlParser提取网页中的纯文本信息
实现主要功能:
JSP页面编写如下:
让form的target值为iframe,当form提交的时候,是异步iframe进行提交,不会影响页面的其他部分。
c:forEach部分是首先隐藏了上传后显示的图片标签和删除标签(这里最大可以上传三张)
相应的JS代码:采用的是JQuery写的,不过写的很啰嗦,有点像是原始JS操作
上传图片采用的是定义的form的submit()提交,iframe的异步提交。
返回操作将image的src的值,置为刚upload的图片在webroot中的位置,这样就能显示图片了。
删除图片时,利用Ajax将要删除的图片路径发送到后台,进行删除,删除成功时,将页面html中image的src值置为空。
后台处理的方法如下:
这样,便完成了要实现的功能。
有人专门写过仿163网盘无刷新文件上传的,那个很详细,而且不依赖于库。
没有搜索到,倒是挺想看看的。
无刷新上传:主要的问题都是出在前台的操作上,后台接收文件相对来说要好解决些的。
依赖库也主要是后台的操作。
仿163网盘无刷新文件上传确实有,你好好上网查查,写这篇文章的作者也写了很多其他的ajax方面的文章,从中获益良多,而且注释也很详细,上次我有了问题还向他请教了。
有人专门写过仿163网盘无刷新文件上传的,那个很详细,而且不依赖于库。
没有搜索到,倒是挺想看看的。
无刷新上传:主要的问题都是出在前台的操作上,后台接收文件相对来说要好解决些的。
依赖库也主要是后台的操作。
- 页面提供一个上传图片的input file选择框,用于上传某一类型的数张图片
- 每次选择完本地图片后,图片便异步存储到后台的文件夹中;
- 并将路径信息存储到数据库中;
- 页面上显示此图的缩略图,并在旁边显示一个删除标记,当点击时,将此图片从页面、数据库、后台的文件夹中删除
- input file选择框清空,再点击用于上传下一张图片;
JSP页面编写如下:
<div> <form action="uploadWaiguanImage.do" id="waiguan_form" name="waiguan_form" enctype="multipart/form-data" method="post" target="waiguan_hidden_frame"> <span> <label>外观图</label> <img src="images/addImage.JPG"> <input type="file" id="waiguan_add" name="waiguan_add"/> </span> <iframe name="waiguan_hidden_frame" id="waiguan_hidden_frame" style="display:none"></iframe> <c:forEach var="x" begin="1" end="3" step="1"> <span> <img id="waiguan_image${x }" style="visibility:hidden" src="" width="100" alt="外观图${x }"/> <img id="waiguan_delete_image${x }" style="visibility:hidden;cursor: pointer" src="images/deleteImage.JPG"/> </span> </c:forEach> </form> </div>
让form的target值为iframe,当form提交的时候,是异步iframe进行提交,不会影响页面的其他部分。
c:forEach部分是首先隐藏了上传后显示的图片标签和删除标签(这里最大可以上传三张)
相应的JS代码:采用的是JQuery写的,不过写的很啰嗦,有点像是原始JS操作
/** * 页面加载时完成操作 */ $(document).ready(function() { // 设置上传外观图 $("#waiguan_add").bind("change", function() { submitImage("waiguan", 3); }); } /** * 上传图片 * * @param {} * para_name 图片所属属性名 * @param {} * number 此类图片的总数量 */ function submitImage(para_name, number) { var para_form = para_name + "_form"; var para_image = para_name + "_image"; // alert(para_image); for (var i = 1; i <= number; i++) { var srcValue = $("#" + para_image + i).attr("src"); // alert(srcValue); // alert(srcValue.length); if (srcValue == "" || srcValue.length == 0) { // alert("break"); break; } } if (i > number) { alert("已超过了此类图的上传最大限"); // 重置上传按钮,使之为空 resetUploadBotton(para_name + "_add"); } else { $("#" + para_form).submit(); } } /** * iframe上传外观图片的返回操作 * * @param {} * msg 返回的图片所在地址 */ function callbackWaiguan(msg) { if (msg != "error") { for (var i = 1; i <= 3; i++) { var srcValue = $("#waiguan_image" + i).attr("src"); // alert(srcValue); if (srcValue == "" || srcValue.length == 0) { $("#waiguan_image" + i).attr("src", msg); $("#waiguan_image" + i).css("visibility", "visible"); $("#waiguan_delete_image" + i).css("visibility", "visible"); $("#waiguan_delete_image" + i).click(function() { deleteImage("waiguan", i); }); break; } } } else { alert("上传图片失败,后台程序出现问题!"); } // 重置上传按钮,使之为空 resetUploadBotton("waiguan_add"); } /** * 删除某个图片时的异步操作 * * @param {} * para_name * @param {} * number */ function deleteImage(para_name, number) { var delete_image_id = para_name + "_image" + number; var imagePathName = $("#" + delete_image_id).attr("src"); if (para_name == "waiguan") { $.get("deleteWaiguanImage.do", { deleteFile : imagePathName, t : Math.random() }, function(tag) { alert(tag); if (tag == "true") { $("#" + delete_image_id).attr("src", ""); $("#" + delete_image_id).css("visibility", "hidden"); $("#" + para_name + "_delete_image" + number).css("visibility", "hidden"); } else { alert("连接数据库失败,无法删除该图片!"); } }); } } /** * 重置上传按钮,使之为空 * * @param {} * para_name_add */ function resetUploadBotton(para_name_add) { var form = document.createElement("form"); var span = document.createElement("span"); var para_image_file = document.getElementById(para_name_add); para_image_file.parentNode.insertBefore(span, para_image_file); form.appendChild(para_image_file); form.reset(); span.parentNode.insertBefore(para_image_file, span); span.parentNode.removeChild(span); form.parentNode.removeChild(form); }
上传图片采用的是定义的form的submit()提交,iframe的异步提交。
返回操作将image的src的值,置为刚upload的图片在webroot中的位置,这样就能显示图片了。
删除图片时,利用Ajax将要删除的图片路径发送到后台,进行删除,删除成功时,将页面html中image的src值置为空。
后台处理的方法如下:
/** * 初始化SmartUpload类,用于上传文件 * * @param servlet * @return SmartUpload * @throws ServletException * @throws IOException * @throws SQLException */ public SmartUpload initSmartUpload(ActionServlet servlet) throws ServletException, IOException, SQLException { // 新建一个SmartUpload对象 SmartUpload su = new SmartUpload(); javax.servlet.jsp.PageContext pageContext = JspFactory .getDefaultFactory().getPageContext(servlet, request, response, null, true, 8192, true); // 上传初始化 su.initialize(pageContext); // 设定上传限制 // 1.限制每个上传文件的最大长度。 su.setMaxFileSize(10000000); // 2.限制总上传数据的长度。 su.setTotalMaxFileSize(20000000); // 3.设定允许上传的文件 su.setAllowedFilesList("jpg,gif,bmp,pcx," + "tiff,jpeg,tga,exif,fpx,cad"); // 4.设定禁止上传的文件 su.setDeniedFilesList("exe,bat,jsp,htm,html"); return su; } /** * 异步上传外观图 * * @param mapping * @param form * @param request * @param response * @return * @throws Exception */ public ActionForward uploadWaiguanImage(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { SeriesService seriesService = ServiceFactory.getSeriesService(request, response); String filePathName = null; boolean tag= true; try { //初始化SmartUpload对象 SmartUpload su = seriesService.initSmartUpload(this.getServlet()); //上传外观图,将文件存储在filePath中,遍历系列对象的外观图属性,将图片的位置存储在某一空的属性中 filePathName = "upload/" + seriesService.addWaiguanImage(su); } catch (Exception e) { e.printStackTrace(); tag = false; } PrintWriter out = response.getWriter(); if (tag == true) { out.println("<script>parent.callbackWaiguan('" + filePathName + "')</script>"); } else { out.println("<script>parent.callbackWaiguan('error')</script>"); } return null; } /** * 异步删除某个外观图 * * @param mapping * @param form * @param request * @param response * @return * @throws Exception */ public ActionForward deleteWaiguanImage(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { Integer seriesID = (Integer) request.getSession().getAttribute( "seriesID"); String filePathName = (String) request.getParameter("deleteFile"); SeriesService seriesService = ServiceFactory.getSeriesService(request, response); boolean tag = true; try { //从数据库中和文件路径中删除外观图 tag = seriesService.deleteWaiguanImage(filePathName, seriesID); } catch (Exception e) { e.printStackTrace(); tag = false; } PrintWriter out = response.getWriter(); out.write(new Boolean(tag).toString()); return null; }
这样,便完成了要实现的功能。
评论
10 楼
wyxy2005
2011-11-22
ie下,$("#waiguan_add").bind("change" 这个的事件出发需要点from之外点击之后才开始上传。火狐是可以正常执行的,不理解为什么出现这个情况
9 楼
zjiaohuang
2010-01-21
这里有一个用FancyUpload实现的demo,个人认为FancyUpload实现的上传简单实用。API同时也是十分详细
8 楼
sunrisetg
2010-01-20
楼主能把 该实验的源码 上传看看吗?
7 楼
makemyownlife
2009-11-06
wnzz95391511 写道
Army 写道
有人专门写过仿163网盘无刷新文件上传的,那个很详细,而且不依赖于库。
没有搜索到,倒是挺想看看的。
无刷新上传:主要的问题都是出在前台的操作上,后台接收文件相对来说要好解决些的。
依赖库也主要是后台的操作。
仿163网盘无刷新文件上传确实有,你好好上网查查,写这篇文章的作者也写了很多其他的ajax方面的文章,从中获益良多,而且注释也很详细,上次我有了问题还向他请教了。
6 楼
willko
2009-11-05
swfupload挺好的。
还能跨域
还能跨域
5 楼
liwenshui322
2009-11-05
看不懂
4 楼
wnzz95391511
2009-06-02
Army 写道
有人专门写过仿163网盘无刷新文件上传的,那个很详细,而且不依赖于库。
没有搜索到,倒是挺想看看的。
无刷新上传:主要的问题都是出在前台的操作上,后台接收文件相对来说要好解决些的。
依赖库也主要是后台的操作。
3 楼
Army
2009-06-02
有人专门写过仿163网盘无刷新文件上传的,那个很详细,而且不依赖于库。
2 楼
zgz888
2009-06-02
好东西,谢谢了
1 楼
langhua9527
2009-05-27
好东东,收藏一下,需的时候来看。。。我原来在一个项目里都准备做异步上传的,结果时间关系,就同步了。。。。
发表评论
-
使用Hibernate时,出现java.lang.UnsupportedOperationException: Update queries only supp
2010-12-19 22:56 2686使用Hibernate时,出现java.lang.Unsupp ... -
如何在Servlet或Action中获取PageContext
2009-05-21 20:32 5452如何在Servlet或Action中获取JSP的内置对象Pag ... -
EL、JSTL的基本使用方法
2009-05-19 20:53 2053一、EL表达式: * 表示隐式对象 *存取器 ... -
Eclipse中include 标签使用出现的问题
2009-05-19 10:33 1985在MyEclipse中使用<%@ inc ... -
JQuery基本操作笔记
2009-05-17 21:44 1316获取select框中的已选值 $("#"+ ... -
JQuery实现IE浏览器上不支持的option disable选项
2009-05-17 21:34 2826可怜的IE,不支持select 中option的disable ... -
The type java.lang.Object cannot be resolved.问题
2009-05-06 18:26 2313不知道怎么回事,Eclipse中我的项目中的一个java文件报 ... -
Hibernate实践
2009-05-04 10:52 990感觉这篇写Hibernate的文 ... -
itext生成PDF时生成图片的问题
2009-04-29 15:13 11716最近需要做一个报告生成,需要生成PDF格式,就采用了itext ... -
ORA-01000: maximum open cursors exceeded
2009-04-22 21:04 1671今天做了个程序,中间牵扯到了有7个表格,数据库使用的是ORAC ... -
Applet获取URL参数
2009-04-03 14:43 3166因为在WEB中嵌入的Applet需要用到一个servlet输出 ... -
Web中使用Applet的方法
2009-04-02 13:42 4160Applet这东西,以前没有使用过,更没有在jsp页面中使用。 ... -
Spring-XML配置-Tomcat -Unable to validate using XSD
2009-04-02 13:03 6923今天把师姐用JFreeChar做的图的模块集成过来,结果部署到 ...
相关推荐
iframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.doc
js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9
使用iframe实现图片上传以及上传后的本页面无刷新展示。运行环境是php和jq
Uploader是非常强大的异步文件上传组件,支持ajax、iframe、flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证、图片预览、进度条等,广泛应用于淘宝网,比如退款系统、...
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 ...
摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先...
针对使用低版本浏览器的用户因安全策略导致无法上传文件的问题,采用一种基于Iframe的内联框架的解决方案能够实现异步文件上传、删除等功能。用这种方式上传图片、音视频等多媒体文件时,能在不跳转页面情况下看到所...
目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一,利用jquery ajaxfileupload.js实现文件上传 ...
做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去… 等真正实现的时候才发现,根本行不通。 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。 ...
后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果。网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理。 一、详解...
首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处理文件上传的操作。紧着着的...
ajaxFileUpload是一个异步上传文件的jQuery插件传统的form表单方式上传文件, 必然会刷新整个页面。 那么在不刷新界面的情况下实现文件的上传呢? 在 HTML4下, 聪明的程序员们发明了 ajax file upload 方式(form +...
使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...
ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作...
此前真正的异步上传业界一直没有实现。国外有一个真正异步上传的例子,但它是在服务端用perl语言获取上传文件的信息,如果空间仅支持php不支持perl那就没辙。目前很多专做文件分享的网站都是由于具有系统配置权限...
前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容...
心想来个ajax异步上传图片吧,这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上...
最近在工作中使用了Jquery的ajaxFileUpload的图片上传插件,感觉这种异步上传的方式非常好用接下来就介绍一下这个插件的使用。 通过查看插件的源码发现,插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS...