ajaxFileUpload文件上传
一、简介
ajaxFileUpload是一种异步的文件上传控件，通过ajax进行文件上传，并获取上传处理结果。在很多时候我们需要使用到文件上传的功能，但是不需要使用那些强大的上传插件。此时就可以使用ajaxFileUpload。它基于jquery，本质是使用iframe完成上传。下载地址为：下载 。
二、实例
网页代码如下：
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
</head>
<body>
<div>
<form id="formItem">
<div id="contentTable" style="border:0px;">
<h1 class="title" style="font-size:15px;border-bottom:1pxsolid#DFE3E6;">excel文件上传</h1>
<table width="80%">
<tr>
<td width="30%" align="right">
选择要上传的excel文件
</td>
<td width="70%" style="text-align:center;">
<input type="file" id="file1" name="file"/>
</td>
</tr>
</table>
<div>
<input type="button" value="导入 "/>
</div>
</div>
</form>
</div>
<scriptsrc="${pageContext.request.contextPath}/res/js/jquery-1.9.1.min.js"type="text/javascript"></script>
<scriptsrc="${pageContext.request.contextPath}/res/js/ajaxfileupload.js"></script>
<scripttype="text/javascript">
var flag=false;
$(function(){
//文件类型过滤
$(":button").click(function(){
varfilepath = $("#file1").val();
vararr = new Array();
arr = filepath.split(".");
var fileType = new Array(["xls"],["xlsx"]);
for(var i = 0; i < fileType.length; i++){
if(arr[1] == fileType[i]){
flag = true;
}
}
if(flag){
ajaxFileUpload();
}else{
alert("请选择excel文件上传")
return false;
}
})
}); functionajaxFileUpload(){
$.ajaxFileUpload
(
{
url : '${pageContext.request.contextPath}/file/upload.action',//用于文件上传的服务器端请求地址
secureuri : false,//一般设置为false
fileElementId : 'file1',//文件上传空间的id属性
dataType : 'json',//返回值类型一般设置为json
success : function(data,status)//服务器成功响应处理函数
{
if(data){
alert("上传成功！");
$("#file1").val("");
}
flag = false;
},
error : function(data,status,e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>
</body>
</html>
服务器端代码如下：
/**
*使用springmvc进行文件上传处理
*/
@RequestMapping("upload")
@ResponseBody
public boolean upload(HttpServletRequest request, HttpServletResponse response ) throws UnsupportedEncodingException
{
String path = request.getSession().getServletContext().getRealPath("");
Calendar calendar = Calendar.getInstance();
calendar.setTime(new Date());
request.setCharacterEncoding("UTF-8");
path = String.format("%s\\%s\\%s\\%s\\%s\\%s", path, "file", "upload", calendar.get(calendar.YEAR),
calendar.get(calendar.MONTH), calendar.get(calendar.DAY_OF_MONTH));
File filepath = new File(path);
if (!filepath.exists()) {
filepath.mkdirs();
} MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获得文件
MultipartFile multipartFile = multipartRequest.getFile("file");
String filename = multipartFile.getOriginalFilename();
OutputStream os = null;
InputStream is = null;
File uploadFile = null;
try {
is = multipartFile.getInputStream();
if (is != null) {
uploadFile = new File(filepath, System.currentTimeMillis() + ".xls");
os = new FileOutputStream(uploadFile);
IOUtils.copy(is, os);
os.flush();
}
} catch (IOException e) {
e.printStackTrace();
return false;
} finally {
IOUtils.closeQuietly(os);
IOUtils.closeQuietly(is);
}
return true;
}
ajaxFileUpload文件上传的更多相关文章
- MVC+AjaxFileUpload文件上传
来源:微信公众号CodeL 本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢? 原因是在此之前,我们尝试使用过很多基于flash ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- spring mvc ajaxfileupload文件上传返回json下载问题
问题:使用spring mvc ajaxfileupload 文件上传在ie8下会提示json下载问题 解决方案如下: 服务器代码: @RequestMapping(value = "/ad ...
- AjaxFileUpload文件上传组件(php+jQuery+ajax)
jQuery插件AjaxFileUpload可以实现ajax文件上传,下载地址:http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupl ...
- ajaxFileUpload 文件上传
源码: jQuery .extend({ createUploadIframe : function(id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //c ...
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...
- ajaxFileupload多文件上传
最近有个功能模块需要上传图片,为了和之前的伙伴们保持一致我也使用了ajaxFileupload, 但是源码只支持单文件上传,所以百般斟酌之下决定修改源码,废话不多说直接上代码 HTML上传代码段: & ...
- 使用ajaxfileupload.js实现文件上传
ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,file ...
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
随机推荐
- 快速暴力解决Eclipse ADT和Android Studio兼容问题，创建同时兼容ADT和AS的安卓工程
环境:AS 2.1.2+Java1.7+Gradle 2.14+ADT 24.0.2+MyEclipse 2015 前言:因为比赛要求使用ADT,而我本身比较习惯使用AS开发,遂想办法打造兼容两个ID ...
- 爆搜 + 模拟 --- codeforces 475C
Problem's Link:http://codeforces.com/problemset/problem/475/Chttp://codeforces.com/problemset/proble ...
- JavaScript执行顺序分析
之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...
- C#开发中可能会用到的一些小贴士（转）
转至http://www.cnblogs.com/Ebony-Ivory/p/4380106.html C#篇: 1.目标平台的选择 64位操作系统在编译VS里的程序时,根据需要设置项目属性的“目标平 ...
- [PE结构分析] 11.资源表结构
资源表是一个树形结构,可以设置成2的31次方的层数,Windows 使用了3级: 类型->名称->语言 其中涉及到四个结构: Data Description Resource Direc ...
- Eclipse环境下使用Maven注意事项
在最新版本的Eclipse Java EE IDE for Web Developers中已经包含Maven 2 在File,New中可以看到Maven Project,新建, 按照步骤一路下来,要求 ...
- SQL数据库基础（一）
数据库: 结构化查询语言(Structured Query Language)简称SQL: 数据库管理系统(Database Management System)简称DBMS: 数据库管理员(Data ...
- 我为什么要做富文本编辑器【wangEditor5个月总结】
请访问wangEditor官网:www.wangEditor.com ----------------------------------------------------------------- ...
- HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
<!-- -->是HTML的注释标签,使用<和>是符合HTML标签语法规则的. /* */(注释代码块).//(注释单行)是CSS和JS的注释标签. 两种注释有各自的使用环境, ...
- SAP RFC通信模式
在网络技术中,数据通信可以大致划分为两种基本模式:同步通信和异步通信. 其本义是:异步通信时,通信双方时钟允许存在一定误差:同步通信时,双方时钟的允许误差较小.在SAP的系统间的通信过程中,也借用术语 ...