方法一:使用FormData(因IE8不支持FormData, IE10才支持,因此此方法不兼容IE10以下的IE浏览器) 
也可参考文章 http://www.jianshu.com/p/46e6e03a0d53

html:

<input type="file" class="form-control" id="inputfile" title="多个文件请打包后再上传" style="display:inline-block;width:100%;_overflow:hidden;" />

js:

//新增行的保存及上传文件
function uploadFile(data) {
var fileObj = document.getElementById("inputfile").files; // js 获取文件对象 var FileController = "/action/add"; // 接收上传文件的后台地址
var form = new FormData(); //20160301 添加其他参数
form.append("param1",param1);
form.append("param2",param2); if (fileObj.length != 0) {
var i = fileObj.length;
for (var j = 0; j < i; j++) {
form.append("file" + j, fileObj[j]); // 文件对象
}
}
form.append("data", data); // XMLHttpRequest 对象
xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("post", FileController, true);
/* event listeners */
// 进度条
// xmlHttpRequest.upload.addEventListener("progress", progressFunction, false);
// xmlHttpRequest.addEventListener("load", uploadComplete, false);
// xmlHttpRequest.addEventListener("error", uploadFailed, false);
// xmlHttpRequest.addEventListener("abort", uploadCanceled, false);
/* end listeners */
xmlHttpRequest.send(form);
} function callback() {
// 接收响应数据
// 判断对象状态是否交互完成,如果为4则交互完成
if (xmlHttpRequest.readyState == 4) {
// 判断对象状态是否交互成功,如果成功则为200
if (xmlHttpRequest.status == 200) {
// 接收数据,得到服务器输出的纯文本数据
var response = xmlHttpRequest.responseText;
//console.log(response); if(response == 1) {
enabledButton();
alert("保存成功!");
} else {
alert("保存失败,请重新尝试!"); }
enableButton(); }else{//!=200 alert("保存失败!");
enableButton();
}
}
}

方法二:使用form提交 兼容各种浏览器,form提交后会刷新页面,且不太好获取返回参数。如要返回原始页面,需要用response.sendRedirect(原始页面url)进行转向。 
html:

<form id="uploadFileForm" name="uploadFileForm" enctype="multipart/form-data" method="post">
<input type="hidden" id="param1" name="param1" value="123"/>
<input type="hidden" id="param2" name="param2" value="测试参数"/>
<div id="uploadFileTableDiv" style="margin-left:10%;">
<table border="1" width="80%">
<tr>
<td style="padding:10px;">
<span style="float:left;">上传文件:&nbsp;&nbsp;</span>
</td>
<td style="padding:10px;">
<input type="file" id="attach" name="attach" size="25" style="height:30px;" />
</td>
</tr>
<tr>
<td colspan="2" style="padding:10px;padding-left:50px;">
<button id="submit_btn" type="button" class="btn btn-default" onclick="javascript:submitFile();">
上传文件
</button>
</td>
</tr>
</table>
</div>
</form>

js:

//20160612 文件上传按钮 form表单提交
function submitFile(){
var attach = document.getElementById("attach").value;
alert("attach: " + attach); if(attach == undefined || attach == ""){
alert("请选择文件");
return;
} uploadFileForm.action = "/tools/uploadFileAction";
uploadFileForm.submit(); }

方法三:使用jquery.form.js支持的ajaxsubmit进行文件上传 
htm

<script th:src="@{/jquery/3.46.0/jquery.form.js}"></script>
<form id="uploadFileForm2" name="uploadFileForm2" enctype="multipart/form-data" method="post">
<div id="uploadFileTableDiv2" style="margin-left:10%;">
<table border="1" width="80%">
<tr>
<td style="padding:10px;">
<span style="float:left;">上传文件:&nbsp;&nbsp;</span>
</td>
<td style="padding:10px;">
<input type="file" id="attach2" name="attach2" size="25" style="height:30px;" />
</td>
</tr>
<tr>
<td colspan="2" style="padding:10px;padding-left:50px;">
<button id="submit_btn2" type="button" class="btn btn-default" onclick="javascript:ajaxSubmitFile();">
上传文件
</button>
</td>
</tr>
</table>
</div>
</form>

js:

//在表单上追加input hidden元素 存放其他参数
function appendInputElementForForm(formId,inputName,inputValue){
var myh = document.createElement("input");
myh.type = "hidden";
myh.value = inputValue;
myh.id = inputName;
myh.name = inputName;
document.getElementById(formId).appendChild(myh);
alert(document.getElementById(inputName).value);
} //20170207 文件上传ajax Form表单提交
function ajaxSubmitFile(){
var attach = document.getElementById("attach2").value;
alert("ajaxSubmitFile attach2: " + attach); if(attach == undefined || attach == ""){
alert("请选择文件");
return;
} appendInputElementForForm( "uploadFileForm2", "param1", "123");
appendInputElementForForm( "uploadFileForm2", "param2", "测试参数"); $('#uploadFileForm2').ajaxSubmit({
type:"post",
url:"/tools/ajaxUploadFileAction",
data:$('#uploadFileForm2').serialize(),
dataType:"json",
error:function(data){
alert(data);
},
success:function(data){
alert("ajaxSubmit上传成功");
alert("下载地址: " + data.data.attachment);
} });
}

最后附带上后台的java代码:

//20160612 文件上传
@RequestMapping(value = "ajaxUploadFileAction")
public ModelAndView ajaxUploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception{
ResponseInfo responseInfo = new ResponseInfo();
logger.info("ajaxUploadFile param1: " + request.getParameter("param1"));
logger.info("ajaxUploadFile param2: " + request.getParameter("param2")); try {
//将当前上下文初始化给CommonsMutipartResolver (多部分解析器)
CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver( request.getSession().getServletContext()); // 判断是否是多数据段提交格式
if (multipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request; logger.info("ajaxUploadFile param1: " + multiRequest.getParameter("param1"));
logger.info("ajaxUploadFile param2: " + multiRequest.getParameter("param2")); Iterator<String> iter = multiRequest.getFileNames();
logger.info("iter.hasNext(): "+iter.hasNext());
Integer fileCount = 0;
while (iter.hasNext()) {
MultipartFile multipartFile = multiRequest.getFile(iter.next());
String fileName = multipartFile.getOriginalFilename();
logger.info("upload demand filename: " + fileName );
//20170207 针对IE环境下filename是整个文件路径的情况而做以下处理
Integer index = fileName.lastIndexOf("\\");
String newStr = "";
if(index>-1){
newStr = fileName.substring(index+1); }else{
newStr = fileName;
}
if(!newStr.equals("")){
fileName = newStr;
}
logger.info("new filename: " + fileName ); if (multipartFile != null) {
HashMap<String,Object> result = DispatchInterfaceUtil.uploadFileByInputStream (multipartFile.getInputStream(),multipartFile.getSize(),fileName); Integer statusCode = (Integer)result.get("statusCode");
logger.info("statusCode: " + statusCode);
if( statusCode.equals(0) ){
String attachment = (String)result.get("attachment");
responseInfo. setStatus(true);
responseInfo.put("attachment", attachment);
}else{
String errorMessage = (String)result.get("errorMessage");
logger.error( "errorMessage: " + errorMessage); responseInfo.setStatus(false);
responseInfo.setMsg("文件上传失败");
}
}
fileCount++;
}//while
logger.info("fileCount: " + fileCount);
}
}catch (Exception e) {
// TODO: handle exception
responseInfo.setStatus(false);
responseInfo.setMsg("后台出现异常");
logger.warn("Error: ", e);
}
response.setContentType("text/html; charset=utf-8");
response.getWriter().write( JSON.toJSONString(responseInfo)); return null;
}

注意: 
(1)IE10可以支持application/json格式的Response了,也就是说低于IE10版本一下的IE浏览器都需要使用text/html格式的Response。 在Response头中指定Content-Type为text/html,是可以解决问题的。这样返回给客户端的是一个JSON字符串(并非JSON对象),无需IE来解析。 
(2)通过js动态添加的input file元素是无法通过form submit的方式(如上所述的后两种方法)将文件内容提交给后台进行文件上传的,因为后台服务器根本不知道有此元素. 若需要动态添加,可以先在html页面中添加上不可见的input file元素(这样后台服务器就知道了该元素的存在), 需要添加时再通过js语句 
document.getElementById(父元素ID).appendChild(inputFile元素对象) 
将input file对象添加在适当位置

(3)在$.each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式: 
break—-用return false; 
continue –用return true;

考虑浏览器兼容的文件上传(IE8不支持FormData)的更多相关文章

  1. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  2. Nginx集群之WCF大文件上传及下载(支持6G传输)

    目录 1       大概思路... 1 2       Nginx集群之WCF大文件上传及下载... 1 3       BasicHttpBinding相关配置解析... 2 4       编写 ...

  3. jquery.form 兼容IE89文件上传

    导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...

  4. JS_单个或多个文件上传_不支持单独修改

    A-From表单直接填写提交地址,不过干预: 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/form-data",for ...

  5. html多文件上传,可支持预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug

    搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...

  7. AngularJs 文件上传(实现Multipart/form-data 文件的上传)

    <!-- 上传yml文件 --> <div class="blackBoard" ng-show="vm.showUpop==true"> ...

  8. JS实现表单多文件上传样式美化支持选中文件后删除相关项

    http://www.youdaili.net/javascript/5903.html

  9. Servlet3.0学习总结——基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...

随机推荐

  1. SpringMVC 复杂对象数据绑定

    表单在 web 页面上无处不在,有些表单可能很复杂,大部分表单里的输入项都会对应后端对象属性.SpringMVC 可以自动将表单值绑定到对象上!而且能绑定很复杂的对象!!这里就不写那些基本的表单绑定了 ...

  2. ZIP压缩包加密破解

    python多线程破解zip文件,废话不多说直接上代码 # -*- coding: UTF-8 -*- #使用多线程和接受参数的形式去破解指定的zip文件 #python3 zip_file_cack ...

  3. LNMP平台部署

    LNAP平台概述 百度百科 LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构. Linux是一类Unix计算机操作系统的统称,是目前最流行的免费操作系统.代表版本有 ...

  4. [BZOJ 2705] [SDOI 2012] Longge的问题

    Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数 \(N\),你需要求出 \(\sum gcd(i, N)(1\le i \le N ...

  5. P1578 奶牛浴场

    P1578 奶牛浴场 题目描述 由于John建造了牛场围栏,激起了奶牛的愤怒,奶牛的产奶量急剧减少.为了讨好奶牛,John决定在牛场中建造一个大型浴场.但是John的奶牛有一个奇怪的习惯,每头奶牛都必 ...

  6. BZOJ5037[Jsoi2014]电信网络——最大权闭合子图

    题目描述 JYY创建的电信公司,垄断着整个JSOI王国的电信网络.JYY在JSOI王国里建造了很多的通信基站.目前所有的基站 都是使用2G网络系统的.而现在3G时代已经到来了,JYY在思考,要不要把一 ...

  7. Codeforces Round #505 Div. 1 + Div. 2

    传送门:>Here< 从来没打过\(CF\)(由于太晚了)-- 不知道开学了以后有没有机会能够熬夜打几场,毕竟到现在为止都是\(unrated\)好尴尬啊~ 今天早上打了几题前几天的比赛题 ...

  8. 【cf842C】 Ilya And The Tree(dfs、枚举因子)

    C. Ilya And The Tree 题意 给一棵树求每个点到根的路上允许修改一个为0,gcd的最大值. 题解 g是从根到当前点允许修改的最大gcd,gs为不修改的最大gcd.枚举当前点的因子,更 ...

  9. 「HDU6158」 The Designer(圆的反演)

    题目链接多校8-1009 HDU - 6158 The Designer 题意 T(<=1200)组,如图在半径R1.R2相内切的圆的差集位置依次绘制1,2,3,到n号圆,求面积之和(n< ...

  10. LOJ# 572. 「LibreOJ Round #11」Misaka Network 与求和(min25筛,杜教筛,莫比乌斯反演)

    题意 求 \[ \sum_{i = 1}^{n} \sum_{i = 1}^{n} f(\gcd(i, j))^k \pmod {2^{32}} \] 其中 \(f(x)\) 为 \(x\) 的次大质 ...