之前上传附件都是用插件,或者用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]//获取附件对象,可通过数组封装再提交
      
        
        
    })

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

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

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  2. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  3. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. IT轮子系列(四)——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

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

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  6. FormData 对象上传二进制文件

    使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html     通过FormData对象可以组装 ...

  7. 使用jquery的ajax提交文件上传

    以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...

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

            项目中需要批量导入数据,感觉这个需求以后也会经常用,必须总结分享下: 引入jquery的第三方表单插件: <scripttype="text/javascript&qu ...

  9. jQuery的ajax实现文件上传大小限制

    用jquery的ajax实现简单的文件上传功能,并且限制文件大小,先上代码. <!DOCTYPE html> <html> <head> <meta char ...

随机推荐

  1. .NET基础面试题整理

    1.什么是.NET?什么是CLI?什么是CLR?IL是什么?   (1).net用于代码编译和执行的集成托管环境,换句话,它管理应用程序运行的方方面面,包括首次运行的编译,为程序分配内存存储数据和指令 ...

  2. [IOS] 利用@IBInspectable

    某些uiview中设置 这个关键字 IBInspectable 可以让其设置的属性,在右侧的属性栏目里面进行直接设置, 这是最近看了一下wwdc的一个视频学习到的,可以方便的进行 UI的测试,

  3. C++11新特性——初始化列表 initializer_list

    破事水: 由于最近数据结构有个实验报告说是要对字符串进行排序,想偷个懒不想一个一个地赋值,虽然可以用strcpy和传入二级指针的形式直接写,但是这样感觉不美观漂亮. 然后就去膜了一下C++11的新特性 ...

  4. 树莓派+移动硬盘搭建NAS服务器

    由于树莓派的USB接口不足以给移动硬盘供电,因此需要另外给移动硬盘提供电源. 显示当前已有的存储设备 # fdisk -l Disk /dev/mmcblk0: 7876 MB, 7876902912 ...

  5. PHP 使用 password_hash() 给密码加密

    PHP >= 5.5 时,可以使用 password_hash() 和 password_verify() 来对用户的密码进行加密和验证,例如在用户注册(加密存储)和登陆(验证): <?p ...

  6. Google内部邮件:如何进行高效的时间管理能量波动图

    Google内部邮件:如何进行高效的时间管理能量波动图 发布时间: 2015-12-16 22:16:50| 阅读数:462 views 最近,我给团队内部写了一封简单的邮件.主要内容是征询他们,如何 ...

  7. 提高Baidu Map聚合的效率

    百度的MAP的例子里提供了一个聚合效果,地址是http://developer.baidu.com/map/jsdemo.htm#c1_4 ,效果图如下图: 这个效果很赞,但效率很低,当数据量达到50 ...

  8. 如何编写自己的Arduino库?

    一开始写Arduino 的时候很不习惯,没有main函数,因为好多东西都被隐藏了.一直想搞清楚,以便编写自己的库文件.于是研究一下午,下面是一些总结. Arduino工程的初步认识 一.目录规范 当你 ...

  9. tensorfolw配置过程中遇到的一些问题及其解决过程的记录(配置SqueezeDet: Unified, Small, Low Power Fully Convolutional Neural Networks for Real-Time Object Detection for Autonomous Driving)

    今天看到一篇关于检测的论文<SqueezeDet: Unified, Small, Low Power Fully Convolutional Neural Networks for Real- ...

  10. RelativeLayout中的格局,自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...