jquery 通过ajax FormData 对象上传附件

之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下

html:

<div>
   流程图: <input id="file" type="file" >
   <button ng-click="bpmmainFunction.createBpm()">提交</button>
</div>

js:

$scope.bpmmainFunction={
            //创建bpm
            createBpm:function(){
                   var file=$("#file")[0].files[0];//获取文件对象
                   var form = new FormData();   //这个是关键
                   form.append("file", file);// 文件对象     
      
                   $.ajax({
                        url:projectName+"/testactivity/test" ,//后台请求
                        type: ‘POST‘,
                        cache: false,
                        data: form,
                        processData: false,
                        contentType: false,
                        async: false
                    }).done(function(res) {
                    
                    }).fail(function(res) {
                        
                    });
        
                
            }
            
    }

java 代码:(用的springmvc,MultipartFile 配置就不说了)

@RequestMapping(value = "test")
    public void test(@RequestParam("file") MultipartFile file2){
        //helloWordService.testProccess();
        //helloWordService.createProccess();
        testBPMService.testProccess(file2);
     
        
    }

如果有多附件 可以通过input file 的change事件来封装上传

$("#file").change(function(){
       
         var  file=this.files[0]//获取附件对象,可通过数组封装再提交
      
        
        
    })

时间: 2024-10-26 01:39:07

jquery 通过ajax FormData 对象上传附件的相关文章

MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的!

MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 <script src="~/jquery.unobtrusive-ajax.js"></script>@using (Ajax.BeginForm("upLoadAsync", "UploadFile", new AjaxOp

FormData 对象上传二进制文件

使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,也就是二进制文件. 不是用<form>

基于jquery的Ajax实现 文件上传

---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据). 同步交互:客户端发出一个请

通过jQuery Ajax使用FormData对象上传文件

转自:http://www.cnblogs.com/labnizejuly/p/5588444.html FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file"

jQuery+php+ajax+PHPExcel实现上传excel文件导入数据库

项目中需要批量导入数据,感觉这个需求以后也会经常用,必须总结分享下: 引入jquery的第三方表单插件: <scripttype="text/javascript"src="/js/lib/jquery.ajax.form.js"></script> 视图文件:goods_list.ctp(商品列表), <div class="btnimport"> <form class='myupload' acti

使用jQuery Uploadify在ASP.NET 上传附件 (转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuery Uploadify在ASP.NET MVC3中的使用 和 Asp.net Mvc中使用uploadify实现图片缩放保存. 本文是一个简单的介绍Demo,主要是动态传递参数方法:通过formdata 向处理程序传递额外的表单数据: <!DOCTYPE html PUBLIC "-//W3C

jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input type="button" onclick="post()" value="提交"/>就不会刷新页面了!!! 参考 http://bbs.csdn.net/topics/391852021 what fuck ... sb html   我在那

jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案

今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.form问题,我对照曾经的项目才发现,在这个项目中使用的jQuery是1.10.2的版本号,而曾经是使用的1.4.2.度娘一番之后,找到解决的方法:jQuery.handleError is not a function 报错原因是: handlerError仅仅在jquery-1.4.2之前的版本号中存在.jqu

利用formdata对象上传文件时,需要添加的参数

function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success