angular学习-angualr文件上传

原创 2018年04月17日 16:17:07

原生:

$(".cert_box").on("change","#uploadFile",function(event){


            var formData = new FormData();
            formData.file=uploadFile;//文件
            console.log(formData);
            var i = 0;
            //var files = getTarget(event).files,
            var vTarget= event.target || event.srcElement;
            var files = vTarget.files,
              data = new FormData();
            var len = files.length;
            while (i < len) {
                data.append("Filedata", files[i]);
                i++;
            }
            console.log(data);
            xhr = new XMLHttpRequest();
            xhr.open("post", $rootScope.baseUrl + "service/prv/PRV_BASIC/Srv_PRV_FileUpload.ashx", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    alert("添加成功");
                    //EventUtil.getTarget(event).type = "text";
                    //EventUtil.getTarget(event).type = "file";
                    //$scope.searchEditImaList();
                }
            };
            xhr.send(data);
        })

angular :

$(".cert_box").on("change","#uploadFile",function(event){
            var uploadFile=$("#uploadFile")[0].files[0];
            var vTarget= event.target || event.srcElement;
            var files = vTarget.files;
            //jquery获取$("#uploadFile").prop("files")[0];
            var formData = new FormData();
            // formData.append('fileTypeId', fileType);//其他需要上传的字段
            // formData.append('file', files);//文件
            var len = files.length;
            var i=0;
            while (i < len) {
                formData.append("Filedata", files[i]);
                i++;
            }
            console.log(files);
            $http({
                url:$rootScope.baseUrl+"service/prv/PRV_BASIC/Srv_PRV_FileUpload.ashx",
                method:"POST",
                headers: {'Content-Type': undefined},//使用angular上传一定要加上这一句,不然传给后台的是空的。
                data: formData,
                transformRequest: angular.identity
            }).then(function (result) {
                var res = result.data;
                if(res.Succeed == 1){
                    if(res.Message.saveName){
                        value.upSus = true;
                        value.saveName = res.Message.saveName;
                        value.fileUrl = res.Message.fileUrl;
                    }else{
                        alert(res.Message)
                    }
                }else{
                    alert(res.Message)
                }

            })

}

angular上传文件(点击上传)

Simple example                                                 .my-drop-zone { border: dotted ...
  • tquank
  • tquank
  • 2016-08-02 16:31:27
  • 1808

angular上传文件和ajax上传文件

angular上传文件var uploadFile=document.querySelector("#uploadFile").files[0]; //jquery获取$("#uploadFile")...
  • isxixi
  • isxixi
  • 2017-11-21 17:32:10
  • 368

AngularJS用原生的fileinput上传图片

问题描述:在Angular环境中,使用这个控件进行上传文件,不通过表单提交的方法,而且需要将得到的图片进行裁剪 解决方法:      先通过                ang...
  • TomKKlalala
  • TomKKlalala
  • 2016-11-30 18:59:33
  • 1881

angularjs 日志

angularjs 待续,文章整理中 后续这里为目录
  • flash8627
  • flash8627
  • 2016-06-05 21:52:12
  • 441

AngularJS上传文件

使用AngularJS上传文件 前台是Angular页面 后台使用SpringBoot/SpirngMVC 上传文件 html &amp;lt;div&amp;gt...
  • u013360850
  • u013360850
  • 2017-02-26 17:55:35
  • 3125

AngularJS下$http上传文件(AngularJS file upload/post file)

AngularJS下$http上传文件(AngularJS file upload/post file)上一次因为赶着完成进度,所以用\$.ajax实现了文件上传(上一篇迭代总结有),这阵子需求完成得...
  • Jannie_Kung
  • Jannie_Kung
  • 2016-07-28 17:31:14
  • 8309

angualr demo

  • 2017年09月29日 17:38
  • 788B
  • 下载

支持Angular4好用的文件上传组件ng2-file-upload

转载自:http://www.cnblogs.com/gavin-cn/p/7256852.html 在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-uploa...
  • menghuannvxia
  • menghuannvxia
  • 2017-11-23 18:17:36
  • 2250

AngularJs实现Multipart/form-data 文件的上传

AngularJs实现Multipart/form-data 文件的上传由于公司的需要,我们从java后台传统的JSP转向了使用前后台完全分离的模式来进行开发。后台完全提供接口,可供网页PC端和移动a...
  • wei389083222
  • wei389083222
  • 2016-05-01 10:44:01
  • 33701

Angular 初学者的推荐学习路径

每个人的学习方式不一样。 你不一定要通读文档。本站大部分页面都是独立的。 Angular 初学者可能希望跟随下面流行的学习路径。 如果你还没有这样做,搭建本地 Angul...
  • goto1997
  • goto1997
  • 2017-03-17 11:19:47
  • 1034
收藏助手
不良信息举报
您举报文章:angular学习-angualr文件上传
举报原因:
原因补充:

(最多只允许输入30个字)