文档章节

file input

own1991
 own1991
发布于 2017/08/17 17:38
字数 1480
阅读 12
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

原来代码:

var uploadFile = (['$stateParams', 'mzServer', function ($stateParams, mzServer) {
    return {
        restrict: 'EA',
        require: "ngModel",
        link: function (scope, element, attrs, ngModelController) {
            scope.$watch(attrs.ngModel, function (data) {
                if (attrs.required) {
                    ngModelController.$setValidity('uploadFile', false);
                }
                if (mzServer.isEmptyOrNull(data) || angular.isUndefined(data))
                {
                    $(element).fileinput('refresh', { initialPreview: ["/images/no_img.jpg"], initialPreviewAsData: true, });
                }
                else
                {
                    var arrimg = [];
                        arrimg.push(attrs.readimg + "/" + data);
                    $(element).fileinput('refresh', { initialPreview: arrimg, initialPreviewAsData: true, });
                    if ($stateParams.OpType.toLowerCase() == "query")
                    {
                        $('.file-caption-main').hide();
                    }

                    ngModelController.$setValidity('uploadFile', true);
                }
            });
            $(element).fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/form/FileUpload/" + $stateParams.ConfigName + "/" + $stateParams.OpType + "/" + attrs.uploadFile || null, //上传的地址
                autoReplace: true,
                allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg','bmp'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCancel: false,
                showRemove: true,
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                validateInitialCount: true,
                enctype: 'multipart/form-data',
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
                
            }
            ).on('fileuploaded', function (event, data, previewId, index) {
                if (data.response.ResponseMessage.Success) {
                    //ngModelController.$setViewValue(data.response.Status);
                    ngModelController.$setValidity('uploadFile', true);
                } else {
                    ngModelController.$setValidity('uploadFile', false);
                    mzServer.error(data.response.ResponseMessage.ErrorMessage);
                }
            })
            .on('filebatchuploadcomplete', function (event, files, extra) {
               // console.log('File batch upload complete');
                //$(this).closest('.file-input .btn-file').attr('disabled', 'disabled');
                //$(this).closest('.file-input .btn-file input').attr('disabled', 'disabled');
                angular.element('.file-input .fileinput-remove-button').removeAttr('disabled');
            }).on("fileclear", function (event) {//移除调用事件
                ngModelController.$setViewValue();
                if (attrs.required) 
                    ngModelController.$setValidity('uploadFile', false);
                else
                    ngModelController.$setValidity('uploadFile', true);
                
                
                $(this).closest('.file-input .btn-file').removeAttr('disabled');
                $(this).closest('.file-input .btn-file input').removeAttr('disabled');
            });
        }
    }
}]);

一次修改:

//上传图片按钮
var uploadFile = (['$stateParams', 'mzServer', function ($stateParams, mzServer) {
    return {
        restrict: 'EA',
        require: "ngModel",
        link: function (scope, element, attrs, ngModelController) {
            scope.$watch(attrs.ngModel, function (data) {
                if (attrs.required) {
                    ngModelController.$setValidity('uploadFile', false);
                }
                if (mzServer.isEmptyOrNull(data) || angular.isUndefined(data))
                {
                    $(element).fileinput('refresh', { initialPreview: ["/images/no_img.jpg"], initialPreviewAsData: true, });
                }
                else 
                {
                    if ($stateParams.OpType.toLowerCase() == "query" || $stateParams.OpType.toLowerCase() == "edite") {
                        debugger
                        if (data.indexOf(",") > 0) {
                            var arrimg = [];
                            darray = data.split(",");
                                for (var i = 0; i < darray.length; i++) {
                                    arrimg.push(attrs.readimg + "/" + darray[i]);

                        }
                        }
             
                        $(element).fileinput('refresh', { initialPreview: arrimg, initialPreviewAsData: true, });
                    }
                    
                    if ($stateParams.OpType.toLowerCase() == "query")
                    {
                        $('.file-caption-main').hide();
                    }

                    ngModelController.$setValidity('uploadFile', true);
                }
            });
            $(element).fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/form/FileUpload/" + $stateParams.ConfigName + "/" + $stateParams.OpType + "/" + attrs.uploadFile || null, //上传的地址
                autoReplace: true,
                allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg','bmp'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCancel: false,
                showRemove: true,
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 3, //表示允许同时上传的最大文件个数
                validateInitialCount: true,
                enctype: 'multipart/form-data',
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
                
            }
            ).on('fileuploaded', function (event, data, previewId, index) {
                if (data.response.ResponseMessage.Success) {
                    var rrr = scope;
                    if (data.files.length >= 1) {
                        if (!scope.object[attrs.name]) {
                            scope.object[attrs.name] = data.response.Status;
                        } else {
                            scope.object[attrs.name] = scope.object[attrs.name] + "," + data.response.Status;
                        }
                    } 
                    
                    ngModelController.$setValidity('uploadFile', true);
                    
                } else {
                    ngModelController.$setValidity('uploadFile', false);
                    mzServer.error(data.response.ResponseMessage.ErrorMessage);          
                }
            })
            .on('filebatchuploadcomplete', function (event, files, extra) {
                if (!$(this).closest('.file-input .btn-file input').attr('multiple')) {
                    $(this).closest('.file-input .btn-file').attr('disabled', 'disabled');
                    $(this).closest('.file-input .btn-file input').attr('disabled', 'disabled');
                }
         
                angular.element('.file-input .fileinput-remove-button').removeAttr('disabled');
            }).on("fileclear", function (event) {//移除调用事件
                ngModelController.$setViewValue();
                if (attrs.required) 
                    ngModelController.$setValidity('uploadFile', false);
                else
                    ngModelController.$setValidity('uploadFile', true);
                
                
                $(this).closest('.file-input .btn-file').removeAttr('disabled');
                $(this).closest('.file-input .btn-file input').removeAttr('disabled');
            });
        }
    }
}]);

结果集:

//上传图片按钮
var uploadFile = (['$stateParams', 'mzServer', function ($stateParams, mzServer) {
    return {
        restrict: 'EA',
        require: "ngModel",
        link: function (scope, element, attrs, ngModelController) {
            scope.$watch(attrs.ngModel, function (data) {
                if (attrs.required) {
                    ngModelController.$setValidity('uploadFile', false);
                }
                if (mzServer.isEmptyOrNull(data) || angular.isUndefined(data))
                {
                    $(element).fileinput('refresh', { initialPreview: ["/images/no_img.jpg"], initialPreviewAsData: true, });
                }
                else 
                {
                    if ($stateParams.OpType.toLowerCase() == "query" || $stateParams.OpType.toLowerCase() == "edite") {
                        //debugger
                         if ($stateParams.OpType.toLowerCase() == "query")
                          {
                            $('.file-caption-main').hide();
                         }
                        var urlhead = attrs.readimg.replace(/\/wwwroot/, "") + "/";
                        var arrimg = [];
                        if (data.indexOf(",") > 0) {
                          
                          darray = data.split(",");
                          for (var i = 0; i < darray.length; i++) {
                              arrimg.push(urlhead + darray[i]);
                          }
                        } else {
                            arrimg.push(urlhead + data);
                        }
             
                        $(element).fileinput('refresh', { initialPreview: arrimg, initialPreviewAsData: true, });
                    }
                    
                   

                    ngModelController.$setValidity('uploadFile', true);
                }
            });
            $(element).fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/form/FileUpload/" + $stateParams.ConfigName + "/" + $stateParams.OpType + "/" + attrs.uploadFile || null, //上传的地址
                autoReplace: true,
                allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg','bmp'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCancel: false,
                showRemove: true,
                showCaption: true,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 3, //表示允许同时上传的最大文件个数
                validateInitialCount: true,
                enctype: 'multipart/form-data',
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
                
            }
            ).on('fileuploaded', function (event, data, previewId, index) {
                if (data.response.ResponseMessage.Success) {
                    var rrr = scope;
                    if (data.files.length >= 1) {
                        if (!scope.object[attrs.name]) {
                            scope.object[attrs.name] = data.response.Status;
                        } else {
                            scope.object[attrs.name] = scope.object[attrs.name] + "," + data.response.Status;
                        }
                    } 
                    
                    ngModelController.$setValidity('uploadFile', true);
                    
                } else {
                    ngModelController.$setValidity('uploadFile', false);
                    mzServer.error(data.response.ResponseMessage.ErrorMessage);          
                }
            })
            .on('filebatchuploadcomplete', function (event, files, extra) {
                if (!$(this).closest('.file-input .btn-file input').attr('multiple')) {
                    $(this).closest('.file-input .btn-file').attr('disabled', 'disabled');
                    $(this).closest('.file-input .btn-file input').attr('disabled', 'disabled');
                }
         
                angular.element('.file-input .fileinput-remove-button').removeAttr('disabled');
            }).on("fileclear", function (event) {//移除调用事件
                ngModelController.$setViewValue();
                if (attrs.required) 
                    ngModelController.$setValidity('uploadFile', false);
                else
                    ngModelController.$setValidity('uploadFile', true);
                
                
                $(this).closest('.file-input .btn-file').removeAttr('disabled');
                $(this).closest('.file-input .btn-file input').removeAttr('disabled');
            });
        }
    }
}]);
 "ConnectionStrings": {
    //"DefaultConnection": "Data Source=MARVIN-PC\\MSSQL2008;Initial Catalog=PPGDB;User Id=sa;Password=Password01!;",
    "DefaultConnection": "Data Source=192.168.0.210;Initial Catalog=PPGDB;User Id=sa;Password=Password01!;",
    //"DefaultConnection": "Data Source=192.168.0.210;Initial Catalog=WyethMDM0727_Live_2016;User Id=mdm;Password=Password01!;",
    //"DefaultConnection": "Data Source=192.168.0.210;Initial Catalog=WyethMDM718_Live;User Id=mdm;Password=Password01!;",
    //"DefaultConnection": "Data Source=TOBY-PC;Initial Catalog=WyethMDM_816Live;User Id=sa;Password=Password01!;",
    "ConnectionStringHistory": "Data Source=192.168.0.246\\KENMSSQLSERVER;Initial Catalog=KenTestDB;User Id=sa;Password=Password01!;"
  },
  "CustemConfig": {
    "GlobalConfigFilePath": "wwwroot/Configuration/GlobalConfigFilePath.xml,wwwroot/Configuration/GlobalConfigFilePathForForm.xml,wwwroot/Configuration/GlobalConfigFilePathForGridView.xml",
    //批量导入上传目录
    "ImportDirectory": "./wwwroot/uploads/image/excel",
    //图片上传目录
    "ImageDirectory": "./wwwroot/uploads/image",
    "": null,
    //图片是否上传微软云
    "UploadMicrosoftAzure": true,
    //微软云密钥
    "StorageConnectionString": "DefaultEndpointsProtocol=https;AccountName=ppgblob;AccountKey=/Yx4JrlbZGrlvT2BAFN9XVH7JbW4g0EbWJLiByQwvYYWtLnnlB4jsfLg0EFxINIbFYLVNYw/SeXnC7ZGTb1oGw==;EndpointSuffix=core.chinacloudapi.cn",
    //图片读取目录
    "ImageReadDirectory": "", //https: //ppgblob.blob.core.chinacloudapi.cn/image
    //版本号,更新任何版本,请更新此版本号,主要是服务器主动清除客户端的JS/CSS缓存问题
    "VersionNumber": "20160708_03",
    //调试模式,调试模式Form表示会出现调试数据,调试模式会无版本缓存
    "DebugMode": true,
    //跳转登录的用户名是否是加密
    "LoginPageUserNameIsEncrypt": true,
 function imgBindFn(mzServer) {
        return {
            restrict: "A",
            require: "ngModel",
            link: function ($scope, ele, attrs, ngModelController) {
                $scope.$watch(attrs.ngModel, function (viewValue) {
                    if (!ngModelController.$isEmpty(viewValue)) {
                        var urlhead = attrs.readimg.replace(/\/wwwroot/, "") + "/";
                        if (viewValue.indexOf(",") > 0) {
                            var arrimg = [];
                            var darray = viewValue.split(",");
                            var content = "";
                            for (var i = 0; i < darray.length; i++) { 
                                arrimg.push(urlhead + darray[i]);
                              var imgsrc = arrimg[i];
                              content += " <a data-gallery='' href='" + imgsrc + "'><img class='img-rounded' style='width:210px;height:160px;' src='" + imgsrc + "'  /> </a>";
                            }
                            
                        } else {
                            var imgsrc = urlhead + viewValue;
                            var content = " <a data-gallery='' href='" + imgsrc + "'><img class='img-rounded' style='width:210px;height:160px;' src='" + imgsrc + "'  /> </a>"
                            
                        }
                        $(ele).html(content);
                    }
                })
            }
        }
    }

                                            //读取图片路径
                                            var readImg = ConfigManage.GetSystecmConfigValue("CustemConfig:ImageReadDirectory");
                                            if (string.IsNullOrWhiteSpace(readImg))
                                            {
                                                readImg = ConfigManage.GetSystecmConfigValue("CustemConfig:ImageDirectory");
                                            }
                                            
                                                <div class="@itemElement.Class.ModeClass" @Html.Raw(display)>
                                                    @*<div class="form-group form-group-sm">*@
                                                        <div class="@itemElement.Class.LabelBeforeClass">@itemElement.TextInfo.LableBeforeText</div>
                                                        <div class="@itemElement.Class.InputParentClass "  ng-model="object.@(itemElement.Model)" readimg="@readImg" img-bind="">
                                                        </div>
                                                    @*</div>*@
                                                </div>
                                        }

 

© 著作权归作者所有

own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
spring MVC文件上传

这里有3个input 对应上传一个单一文件 每一个File对应一个Pzxh,然后后台接受是这样 @RequestParam("UserID") String UserID, @RequestParam("Sign") String Sign, @RequestParam("TimeStamp......

询问java1
2015/11/03
108
1
input accept属性限制文件上传格式

上传文件的类型;具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 《1》上传.csv格式的 <input text="file" accept=".csv" /> 《2》上传.xls格式 <input text="file"......

Jack088
04/25
28
0
将文件夹下的各文件内容写入一个文件中

<?php function show($dir,$input){ $opendir = opendir($dir) or die("文件打开失败"); while ($read = readdir($opendir)) { if(!isset($cont)){ $cont=null; } if($read !="." && $read ......

雨醉风尘
2016/05/27
40
0
怎么用python去实现几个文件中内容的并行处理

如果我在同一个路径下有三个文件a.txt,b.txt,c.txt,三个文件中的内容分别是: a.txt: b.txt: c.txt: aaa 2 bbb 5 aaa 8 #中间的空格代表一个tab键 bbb 3 cca 6 bba 9 cca 4 ccc 2 bbb 5 ...

塔利班少荣
2015/10/29
1K
1
【原创】自定义input file ---工作总结

先上图吧~ 样式OK,测试功能正常。 思路: 隐藏系统原本的input file,使用css的opacity等属性 然后,提高input file的 z-inde 值 给input file 做一个 onchange事件,将值传给 input text 里...

柴高八斗之父
03/06
12
0

没有更多内容

加载失败,请刷新页面

加载更多

003-ES集群

ES 集群 详情: https://my.oschina.net/u/3635512/blog/3140294 将实验机器/etc/elasticsearch/elasticsearch.yml 中配置文件改为 cluster.name: myes   #ES集群名称node.name:......

伟大源于勇敢的开始
12分钟前
4
0
法国电力项目二期正式验收

2019年12月10日, 法国电力项目二期正式验收 并就未来的合作技术方向进行了探讨: 去中心化数据存储/搜索引擎 可信计算/零知识证明 能源虚拟机改造 出席的人有: 法国电力总部 CIO&CTO Step...

怎当她临去时秋波那一转
27分钟前
2
0
谷歌助手

参照: https://www.mxblog.com.cn/mac%E7%89%88chrome%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AE%89%E8%A3%85%E8%B0%B7%E6%AD%8C%E8%AE%BF%E9%97%AE%E5%8A%A9%E6%89%8B.html......

T型人才追梦者
36分钟前
5
0
索引延迟关联

前言 今天在看代码的时候学习到了一种索引的优化,就先在此记录下来。 具体 举个例子,原sql如下: SELECT * FROM TABLE WHERE INDEX = '' LIMIT 10000, 10; 现象 就算INDEX用了查询索引,...

无敌小杰杰
今天
5
0
tomcat_jdk安装,安装zrlog,nginx代理tomcat,第二个java应用

tomcat_jdk安装 要跑tomcat 首先要安装 jdk jdk 有两个版本 一个是 open jdk,一个是 oracle jdk open jdk 是 oracle jdk 的开源版本 两个版本都可以使用 这次实验先使用 open jdk 来做 如果...

doomcat
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部