应该在很多地方都需要实现文件上传的功能,而且在大都用起了MVC,而文件上传时form又不能用ajax提交,FORM提交总是打开新的页面很是不爽,于是摸索了实现这个未弹新窗口实现文件上传的功能。好了,闲话不多说,直接干活。
1、首先当然是在页面包括Jquery控件了。
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
2、创建一个表单,实现文件上传界面。
<form target="hideWin" method="post" action="${ctx}/dams/upload.do" id="uploadform" enctype="multipart/form-data">
<input type="file" id="excel" name="excel" style="width:270px">
<input type=hidden id='stcd' name="stcd">
<input type=hidden id='clear' name="clear">
<br/>
<input type="checkbox" id="isclear" checked><label for="isclear">先清空数据</label>
</form>
<input type=button id="upload" value="上传">
大家应该注意到了,FORM中加了target=hideWin,意思是告诉浏览器等会儿form提交到hideWin中,而不是新开窗口。至于action后台方法upload.do,这个就交给java后台好了。
3、创建一个名叫hideWin的iframe,隐藏就好。
<iframe id="hideWin" name="hideWin" style="display: none"></iframe>
4、接下来,要做最重要一步,就是如何提交form,提交好办,一个submit就OK了。
$('#upload').click(function(){
var isclear = document.all.isclear.checked?"1":"0";
$('#uploadform').find('#stcd').val(stcd);
$('#clear').val(isclear);
var url = $('#excel').val();
if (url ==""){
$.messager.alert('提示','请选择要上传的EXCEL文件!');
return;
}
var point = url.lastIndexOf(".");
var type = url.substr(point);
if(type!='.xls'){
$.messager.alert('提示','请选择要上传的EXCEL文件!');
return;
};
$('#uploadform').submit();
});
5、最后就是接收后台upload.do方法的返回信息再做处理。但在iframe中接收返回信息可以累坏我了,这也是我记录下这个过程的最重要原因。当初还想用kindeditor的上传功能的,做是也做出来了,却发现它那个上传按钮挺怪异的,还有些地方IE不兼容,最终只好舍弃,自己找办法实现了。
$("iframe[name=hideWin]").bind('load', function() {
var doc =this.contentDocument || this.contentWindow.document;
var data = $.parseJSON(doc.body.innerHTML);
if (data.error === 0){
//$.messager.alert('恭喜','文件已经上传!');
} else {
//alert(data.message);//打印出错信息
}
});
好了,就是这样,大功告成!
分享到:
相关推荐
这里涉及到URL的动态拼接,以及使用window.open方法打开新窗口。 *** MVC后端控制器和视图模型设计。虽然文档没有详细说明,但是为了实现上述功能,需要在*** MVC的控制器中添加相应的处理方法,以及在模型中定义与...
- **响应设置**:在服务器端,设置HttpServletResponse的`setHeader`方法,指定Content-Disposition为"attachment",并附上文件名,这样浏览器会提示用户下载而不是在新窗口打开。 - **流操作**:读取服务器上的...
4. **在线打开预览文件**:在文件上传后,可能需要提供预览功能。这通常通过生成文件的URL并用iframe或新的窗口加载来实现。对于图片和其他媒体文件,还可以使用HTML5的`<video>`和`<audio>`标签进行预览。 在...
在这个场景下,"C# WebAPI文件上传下载源码"指的是使用C#编写的一套实现文件上传和下载功能的WebAPI服务代码。 文件上传功能是Web应用中的常见需求,允许用户将本地文件传输到服务器。在C# WebAPI中,这通常通过...
Flex客户端可以使用`navigateToURL`函数打开一个新的浏览器窗口或标签来发起下载。 **文件删除** 涉及到服务器上的文件管理。在Flex中,用户可能会通过界面上的按钮触发删除操作,这会发送一个HTTP请求到Java服务器...
Struts2则是一个基于MVC模式的Java Web框架,提供了更高级别的抽象,简化了文件上传的处理流程。 总结,实现"Ext相册实现文件拖拽,实时上传进度,本地预览"的功能,需要结合EXT4的前端组件能力、HTML5的File API和...
本文将深入探讨如何在Spring MVC环境中实现文件上传和下载功能,以满足标题和描述中的需求。 首先,让我们理解文件上传的基本流程。在Spring MVC中,文件上传主要依赖于`CommonsMultipartResolver`解析器,它是...
在这个例子中,我们创建了一个`FileSystemResource`对象来代表要下载的文件,并设置了`Content-Disposition`头为"attachment",这样浏览器就会知道这是一个需要下载的文件,而不是在新窗口中打开。同时,我们指定了...
- **响应设置**:在JSP中,我们可以通过设置`HttpServletResponse`的`setContentType()`和`setContentDisposition()`方法,指示浏览器下载文件而不是在新窗口中打开。 - **流处理**:通过`ServletOutputStream`...
文件下载功能则涉及到HTTP响应头的设置,如Content-Disposition来指示浏览器如何处理响应内容,可能是作为附件下载或者在新窗口中打开。此外,可能还需要处理文件的编码和字符集,确保不同类型的文件能正确被用户...
同时,设置响应头中的`Content-Disposition`字段,以指示浏览器如何处理响应(如作为附件下载或在新窗口中打开)。 例如,你可以创建一个Servlet方法如下: ```java protected void doGet(HttpServletRequest ...
- 设置响应头以指示浏览器下载文件而不是在新窗口中打开它。 5. **图片显示** - 当图片上传成功后,返回图片URL,前端更新`<img>`标签的`src`属性: ```javascript success: function(url) { $('#displayImg')...
下载功能则涉及HTTP响应头的设置,如Content-Type表示文件类型,Content-Disposition指示浏览器如何处理响应体,可能是直接下载,也可能是在新窗口中打开。 总之,这个资源包提供的ASP.NET上传下载功能实现,不仅...
总结,基于Struts实现的头像上传功能涉及到Struts框架的MVC模式、ActionForm、Action、文件上传处理、前端交互以及安全性等多个方面。通过这一过程,我们可以学习到如何在实际项目中集成和使用这些技术,提升Web应用...
- 第一种方法是通过修改表单的`action`属性并提交表单来实现新窗口的打开。`document.forms[0].action`设置为要打开的URL,然后调用`submit()`方法提交表单。为了在新窗口中打开,可以使用`window.open`函数,但...
1. **设定响应头**: 在下载操作中,我们需要设置HTTP响应头,包括`Content-Type`(表示文件类型)和`Content-Disposition`(指定浏览器如何处理文件,如触发下载或在新窗口打开)。 2. **读取文件内容**: 使用Java...
- 设置HTTP响应头的`Content-Disposition`属性,以指示浏览器如何处理响应,例如作为附件下载或直接在新窗口中打开。 4. **内容类型**: - 根据要下载的文件类型设置响应头的`Content-Type`,如`application/...
- **Content-Disposition**:在HTTP响应头中设置此字段,指定浏览器如何处理响应,如触发下载或在新窗口中打开。 - **Content-Type**:指定文件的MIME类型,以便浏览器知道如何处理文件。 6. **JSP页面** - 使用...
需要注意的是,服务器需要设置合适的响应头来指示浏览器以下载方式处理,而不是在新窗口中打开。 综上所述,"FileUpload"涉及的技术和环节较多,包括HTTP交互、前端与后端的配合、文件处理、安全控制等多个方面。在...
本篇文章将深入探讨一些JSP开发中的经典技巧,包括客户端编程、发送Email、绘制图形、文件上传、编写国际化应用,以及使用JFreeChart图表系统和MVC架构。 首先,客户端编程是Web应用的重要组成部分。动态表格的实现...