ajaxFileUpload文件上传

一、简介

　　ajaxFileUpload是一种异步的文件上传控件，通过ajax进行文件上传，并获取上传处理结果。在很多时候我们需要使用到文件上传的功能，但是不需要使用那些强大的上传插件。此时就可以使用ajaxFileUpload。它基于jquery，本质是使用iframe完成上传。下载地址为：下载。

二、实例　　

　　网页代码如下：

1 <%@ page contentType="text/html; charset=UTF-8"%>
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <title>文件上传</title>
6 </head>
7 <body>
8   <div>
9         <formid="formItem">
10             <divid="contentTable"style="border:0px;">
11                 <h1class="title"style="font-size:15px;border-bottom:1pxsolid#DFE3E6;">excel文件上传</h1>
12                 <tablewidth="80%">
13                 <tr>
14                     <tdwidth="30%"align="right">
15 选择要上传的excel文件16                     </td>
17                     <tdwidth="70%"style="text-align:center;">
18                     <inputtype="file"id="file1"name="file"/>
19                     </td>
20                 </tr>
21                 </table>
22                 <div>
23                     <inputtype="button"value="导入&nbsp;"/>
24                 </div>
25             </div>
26         </form>
27   </div>
28 <scriptsrc="${pageContext.request.contextPath}/res/js/jquery-1.9.1.min.js"type="text/javascript"></script>
29 <scriptsrc="${pageContext.request.contextPath}/res/js/ajaxfileupload.js"></script>
30 <scripttype="text/javascript">
31 varflag=false;32 $(function(){33   //文件类型过滤
34 $(":button").click(function(){35 varfilepath=$("#file1").val();36 vararr= newArray();37 arr=filepath.split(".");38       varfileType= newArray(["xls"],["xlsx"]);39       for(vari= 0; i<fileType.length; i++){40           if(arr[1]==fileType[i]){41 flag= true;42 }43 }44       if(flag){45 ajaxFileUpload();46 }else{47 alert("请选择excel文件上传")48           return false;49 }50 })51 });52
53 functionajaxFileUpload(){54 $.ajaxFileUpload55 (56 {57 url :'${pageContext.request.contextPath}/file/upload.action',//用于文件上传的服务器端请求地址
58 secureuri :false,//一般设置为false
59 fileElementId :'file1',//文件上传空间的id属性
60 dataType :'json',//返回值类型一般设置为json
61 success :function(data,status)//服务器成功响应处理函数
62 {63           if(data){64 alert("上传成功！");65 $("#file1").val("");66 }67 flag= false;68 },69 error :function(data,status,e)//服务器响应失败处理函数
70 {71 alert(e);72 }73 }74 )75   return false;76 }77 </script>
78 </body>
79 </html>

　　服务器端代码如下：

    /***使用springmvc进行文件上传处理*/@RequestMapping("upload")@ResponseBodypublic boolean upload(HttpServletRequest request, HttpServletResponse response ) throwsUnsupportedEncodingException{String path= request.getSession().getServletContext().getRealPath("");Calendar calendar=Calendar.getInstance();calendar.setTime(newDate());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= newFile(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= newFileOutputStream(uploadFile);IOUtils.copy(is, os);os.flush();}}catch(IOException e) {e.printStackTrace();return false;}finally{IOUtils.closeQuietly(os);IOUtils.closeQuietly(is);}return true;}

ajaxFileUpload文件上传相关推荐

jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传过程,同时支撑多文 ...
AjaxFileUpload文件上传组件(php+jQuery+ajax)
jQuery插件AjaxFileUpload可以实现ajax文件上传,下载地址:http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupl ...
后台学习六---ajaxFileupload文件上传下载
这一章讲讲文件的上传下载,这里我们使用ajax的上传文件方法. ps:基于maven的springmvc框架都已经搭建好了的,如有问题,参考 : 后台学习一-spring+maven+mybatis+ ...
ajaxfileupload 文件上传
js代码: function ajaxFileUpload() {$.ajaxFileUpload({url: '${pageContext.request.contextPath}/activity ...
Ajax，ajaxFileUpload文件上传同步代码js实现
需求描述: 此功能模块是我写的一个项目中的[气瓶定检信息模块]中用到的一个技术,在添加气瓶定检信息数据的同时需要添加4张不同类型的图片,[大家都知道图片是不能直接存数据库的所以这里需要先上传图片获得图 ...
WEB文件上传之JQuery ajaxfileupload插件使用（二）
1.JQuery ajaxfileupload插件使用准备下载地址: http://www.phpletter.com/DOWNLOAD/ 2.原理分析 ajaxfileupload也是利用ifra ...
JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用[转载]
转载:https://www.cnblogs.com/fonour/p/ajaxFileUpload.html 0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基 ...
使用ajaxfileupload.js实现文件上传
ajaxFileUpload是一个异步上传文件的jQuery插件语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,file ...
ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...

ajaxFileUpload文件上传

ajaxFileUpload文件上传相关推荐

最新文章

热门文章