`
570421779
  • 浏览: 46329 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Ajax File upload

 
阅读更多
经常碰到文件上传的问题,这里使用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>
分享到:
评论

相关推荐

    jquery ajax file upload

    在Web开发中,jQuery AJAX File Upload 是一个常见且实用的技术,它允许用户在不刷新整个页面的情况下上传文件。这一技术极大地提升了用户体验,因为用户可以一边浏览网页,一边进行文件上传,提高了交互性和效率。...

    jQuery ajax file upload

    总结来说,`jQuery ajax file upload`是通过`ajaxFileUpload`插件实现的一种无刷新的文件上传方式,它提高了用户体验,并且提供了丰富的自定义选项和回调机制,适用于各种Web应用的文件上传需求。要正确使用,需要...

    AJAX file upload

    "AJAX file upload"是这个技术在上传文件场景中的应用,它允许用户在后台无声无息地上传文件,而无需等待传统的表单提交并重新加载页面。 在传统文件上传中,用户选择文件后,浏览器会发起一个POST请求,将文件数据...

    ajax file upload

    **Ajax File Upload技术详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术使得页面无需刷新即可实现数据的异步交互,极大地提升了用户体验。"jQuery Ajax File Upload"是Ajax技术在上传文件场景中...

    mini-upload-form

    "Mini AJAX File Upload Form"是一个简洁的Web应用程序,主要用于实现基于AJAX的文件上传功能。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术允许网页在不刷新整个页面的情况下与服务器交换数据并更新...

    jQuery Ajax File Upload实例

    ### jQuery Ajax File Upload技术点 1. **项目结构**:一个典型的Web项目应该包含前端页面和服务端代码。在这里,项目结构包含了两个主要的ASPX页面,Default.aspx作为默认页面,而Upload.aspx用于处理文件上传逻辑...

    ajax-file-upload-plugin-0.4.0

    ajax file upload 0.4.0,基于Java的文件上传组件,支持上传文件进度条显示

    jquery file ajax upload插件的实例

    jquery官方插件ajax file upload使用的实例,用asp.net做的服务器端。具体说明请看这里http://www.cnblogs.com/luq885/archive/2007/11/15/959749.html

    ajaxupload.js

    **AjaxUpload技术详解** AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`...

    ajax-upload

    **Ajax Upload技术详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许开发者实现页面的局部刷新,提升用户体验。而"ajax-upload"则是一个基于jQuery的上传插件,它利用Ajax技术实现了异步、多...

    ajaxFileUpload及Flex,jquery学习相关

    标题 "ajaxFileUpload及Flex,jquery学习相关" 涉及到的是前端开发中的两个关键技术:AJAX File Upload和jQuery,以及可能与之配合使用的Flex技术。这些技术都是Web应用程序中实现动态、交互式用户体验的重要工具。 ...

    ajax php file upload

    "ajax php file upload"是一个结合了这两者的技术,它允许用户在后台无声无息地上传文件,提供更好的用户体验。 在AJAX文件上传中,通常会有一个前端界面,用户可以选择文件并触发上传操作。这个过程不会导致页面...

    jquery Ajaxupload应用

    **jQuery AjaxUpload应用详解** AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,...

    ajaxUpload.

    标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...

    ajaxfileupload1.0.zip 文件无刷新上传代码

    【标签】:“ajax file upload 无刷新 上传” 这些标签揭示了该组件的关键特性:使用Ajax进行文件上传,并且实现了无刷新的功能。这意味着在用户选择文件后,组件会使用Ajax调用在后台处理文件上传,而页面的其余...

    jQuery-File-Upload

    4. **自定义事件**:插件提供了丰富的事件接口,如`fileuploadstart`、`fileuploadprogress`、`fileuploaddone`等,方便开发者根据业务需求进行扩展。 ### 四、使用步骤 1. **引入依赖**:在HTML中引入jQuery库和...

    ajax文件异步上传工具

    &lt;title&gt;Ajax File Upload &lt;link rel="stylesheet" href="jQuery-File-Upload-8.8.2/css/fileupload.css"&gt; &lt;input id="fileupload" type="file" name="files[]" multiple&gt; &lt;script src="jQuery-File-Upload-...

    jquery upload ajax方式

    **jQuery Upload AJAX方式详解** 在Web开发中,文件上传是一个常见的功能,传统的文件上传通常需要刷新整个页面,用户体验较差。随着Ajax技术的发展,无刷新上传文件成为可能,jQuery结合Ajax提供了一种优雅的解决...

Global site tag (gtag.js) - Google Analytics