经常碰到文件上传的问题,这里使用ajax提供的ajaxFileUpload来解决
HTML页面:
<form class="form-inline" action="" id="fileUpload" method="POST" enctype="multipart/form-data">
<div class="col-sm-12" align="right">
<div class="float-box">
<input id="excelFile" name="excelFile" type="file"/>
</div>
<div class="float-box">
<button type="button" class="btn btn-danger" ng- click="uploadExcel(altPart.id)">Add</button>
</div>
</div>
</form>
JS:
$.ajaxFileUpload({
url : 'altparts/uploadExcel',
secureuri : false,
fileElementId : 'excelFile',
dataType : 'json',
data : {},
success : function(data, status) {
alert('upload successfully');
$location.path('altparts/');
},
error : function(data, status, e) {
alert('upload exception');
}
});
*这里需要导入ajaxfileupload.js. 并且需要对文件的uploadHttpData进行修改,修改后
uploadHttpData: function( r, type ) {
var data = !type;
var dataparsed = r.responseText.split("{");
dataparsed = dataparsed[1].split("}");
data = type == "xml" || "{ " + dataparsed[0] + " }";
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
return data;
},
原因是在使用json对象时,会自动在返回数据里加入<pre></pre>,导致解析失败。
Java使用SpringMVC
@RequestMapping(value = "/uploadExcel", method = RequestMethod.POST, consumes = "multipart/form-data", produces = "application/json")
public @ResponseBody List<Part> uploadExcel(@RequestParam MultipartFile[] excelFile) {
String fileName = excelFile[0].getOriginalFilename();
if (fileName.lastIndexOf(".xls")==4) {
return analyzeXLS(excelFile[0]);
} else {
return analyzeXLSX(excelFile[0]);
}
}
这里需要使用common-fileupload这个jar包,对应的maven配置如下:
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
分享到:
相关推荐
在Web开发中,jQuery AJAX File Upload 是一个常见且实用的技术,它允许用户在不刷新整个页面的情况下上传文件。这一技术极大地提升了用户体验,因为用户可以一边浏览网页,一边进行文件上传,提高了交互性和效率。...
总结来说,`jQuery ajax file upload`是通过`ajaxFileUpload`插件实现的一种无刷新的文件上传方式,它提高了用户体验,并且提供了丰富的自定义选项和回调机制,适用于各种Web应用的文件上传需求。要正确使用,需要...
"AJAX file upload"是这个技术在上传文件场景中的应用,它允许用户在后台无声无息地上传文件,而无需等待传统的表单提交并重新加载页面。 在传统文件上传中,用户选择文件后,浏览器会发起一个POST请求,将文件数据...
**Ajax File Upload技术详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术使得页面无需刷新即可实现数据的异步交互,极大地提升了用户体验。"jQuery Ajax File Upload"是Ajax技术在上传文件场景中...
"Mini AJAX File Upload Form"是一个简洁的Web应用程序,主要用于实现基于AJAX的文件上传功能。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术允许网页在不刷新整个页面的情况下与服务器交换数据并更新...
### jQuery Ajax File Upload技术点 1. **项目结构**:一个典型的Web项目应该包含前端页面和服务端代码。在这里,项目结构包含了两个主要的ASPX页面,Default.aspx作为默认页面,而Upload.aspx用于处理文件上传逻辑...
ajax file upload 0.4.0,基于Java的文件上传组件,支持上传文件进度条显示
jquery官方插件ajax file upload使用的实例,用asp.net做的服务器端。具体说明请看这里http://www.cnblogs.com/luq885/archive/2007/11/15/959749.html
**AjaxUpload技术详解** AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`...
**Ajax Upload技术详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许开发者实现页面的局部刷新,提升用户体验。而"ajax-upload"则是一个基于jQuery的上传插件,它利用Ajax技术实现了异步、多...
标题 "ajaxFileUpload及Flex,jquery学习相关" 涉及到的是前端开发中的两个关键技术:AJAX File Upload和jQuery,以及可能与之配合使用的Flex技术。这些技术都是Web应用程序中实现动态、交互式用户体验的重要工具。 ...
"ajax php file upload"是一个结合了这两者的技术,它允许用户在后台无声无息地上传文件,提供更好的用户体验。 在AJAX文件上传中,通常会有一个前端界面,用户可以选择文件并触发上传操作。这个过程不会导致页面...
**jQuery AjaxUpload应用详解** AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,...
标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...
jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...
【标签】:“ajax file upload 无刷新 上传” 这些标签揭示了该组件的关键特性:使用Ajax进行文件上传,并且实现了无刷新的功能。这意味着在用户选择文件后,组件会使用Ajax调用在后台处理文件上传,而页面的其余...
4. **自定义事件**:插件提供了丰富的事件接口,如`fileuploadstart`、`fileuploadprogress`、`fileuploaddone`等,方便开发者根据业务需求进行扩展。 ### 四、使用步骤 1. **引入依赖**:在HTML中引入jQuery库和...
<title>Ajax File Upload <link rel="stylesheet" href="jQuery-File-Upload-8.8.2/css/fileupload.css"> <input id="fileupload" type="file" name="files[]" multiple> <script src="jQuery-File-Upload-...