bootstrap图片上传功能

重点：

　　fileupload 、loadImage

引用js：

          <!-- Bootstrap CSS -->
        <link href="~/lib/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <!-- Bootstrap CSS -->
        <link href="~/lib/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

         <!-- Bootstrap styles
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link href="~/lib/jquery-file-upload/9.21.0/css/jquery.fileupload.css" rel="stylesheet" />
    
        <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
        <script src="~/lib/jquery-file-upload/9.21.0/js/vendor/jquery.ui.widget.js"></script>
        <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
        <script src="~/lib/javascript-load-image/2.19.0/js/load-image.all.min.js"></script>
        <script src="~/lib/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>
        <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
        <script src="~/lib/jquery-file-upload/9.21.0/js/jquery.iframe-transport.js"></script>
        <!-- The basic File Upload plugin -->
        <script src="~/lib/jquery-file-upload/9.21.0/js/jquery.fileupload.js"></script>
        <!-- The File Upload processing plugin -->
        <script src="~/lib/jquery-file-upload/9.21.0/js/jquery.fileupload-process.js"></script>
        <!-- The File Upload image preview & resize plugin -->
        <script src="~/lib/jquery-file-upload/9.21.0/js/jquery.fileupload-image.js"></script>
        <!-- The File Upload validation plugin -->
        <script src="~/lib/jquery-file-upload/9.21.0/js/jquery.fileupload-validate.js"></script>
        <script src="~/js/EnterpriseDetail.js?v=1"></script>
        <script type="text/javascript" src="~/lib/jquery-validation/1.17.0/jquery.validate.js"></script>
        <script type="text/javascript" src="~/lib/jquery-validation-unobtrusive/3.2.9/jquery.validate.unobtrusive.js"></script>
        <script type="text/javascript" src="~/lib/jquery-validation/1.17.0/localization/messages_zh.js" charset="utf-8"></script>  

页面html

         <div class="form-group row">
                <label class="col-md-2 col-form-label ">营业执照*</label>
                <div class="col-md-6">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <button  type="button" class="fileinput-button btn btn-info waves-effect waves-light mr-4">上传附件</button>
                    <button  type="button" class="ImgRemove-button btn btn-info waves-effect waves-light mr-4" >删除附件</button>
                    <!-- The global progress bar -->
                    <div  class="progress" >
                        <div class="progress-bar progress-bar-success"></div>
                    </div>
                    <!-- The container for the uploaded files -->
                    <div  class="files "></div>
                    <input asp-for="BusinessLicence" type="text"  class="imageGroupId">
                    <span asp-validation-for="BusinessLicence" class="text-danger validationShow"></span>
                </div>
            </div>








<form asp-controller="upload" asp-action="image" method="post" >
    <!-- The file input field used as target for the file upload widget -->
    <input  type="file" name="files[]" multiple>
    <div class="uploadInfo">

    </div>
</form>

页面 js实现：

ImageUpload.Init("@Url.Content("~/upload/image")");
ImageLoad.Init(100, 100, 50, 50, true);





var ImageUpload = {
    imageUrl:"",
    Init:function(urlV){
        ImageUpload.imageUrl=urlV
        ImageUpload.AddEvent();
        ImageUpload.OperateInjecte();
    },
    AddEvent: function () {
         $(".fileinput-button").click(function () {
            var $this = $(this);
            var $fileupload = $(\'#fileupload\');
            var $showDiv = $this.siblings(".files:first");
            var $progress = $this.siblings(".progress:first");
            var $removeBt = $this.siblings(".ImgRemove-button:first"); 
            var $groupGuidInput=$this.siblings(".imageGroupId:first");

            var $fileuploadInfo = $fileupload.siblings(".uploadInfo:first");
            $fileuploadInfo.append(\'<input class="uploadPart\'+
                \'" attr-bt="\' + $this.attr("id") +
                \'" attr-removeBt="\' + $removeBt.attr("id") +
                \'" attr-show="\' + $showDiv.attr("id") + \'" \' +
                \'" attr-progress="\' + $progress.attr("id") +
                \'" attr-groupGuidInput="\' + $groupGuidInput.attr("id") +
                \'" attr-group type="hidden">\');
             $fileupload.click();
             
        });
        $(".ImgRemove-button").click(function () {
            var $this = $(this);
            var $showDiv = $this.siblings(".files:first");
            var $uploadBt = $this.siblings(".fileinput-button:first");
            var $groupGu.imageGroupId:first");
            $showDiv.html("");
            $groupGuid.val("");
            $this.hide();
            $uploadBt.show();
        });
    },
    SetImgFromGroupGuid:function(edit){
         $(".imageGroupId").each(function () {
            var $this = $(this);
            var $fileupload = $(\'#fileupload\');
            var $showDiv = $this.siblings(".files:first");
            var $progress = $this.siblings(".progress:first");
            var $removeBt = $this.siblings(".ImgRemove-button:first"); 
            var $uploadBt=$this.siblings(".fileinput-button:first");

            var $fileuploadInfo = $fileupload.siblings(".uploadInfo:first");
            var $node= $(\'<div/>\').appendTo($showDiv); 
            var getUrl=ImageUpload.imageUrl+"?g="+$this.val()+"&j=false";

            ImageLoad.loadUrlImageToPriview(getUrl,function($img){
                if(edit){
                    $uploadBt.hide();
                    $removeBt.show();
                }else{
                    $uploadBt.hide();
                    $removeBt.hide();
                }
                $node.prepend($img);
                var $node2=$(\'<p/>\')
                    .append($(\'<a href="\'+getUrl+\'"  target="_blank" class="pull-left py-2"/>\').text("查看附件"));
                $node2.appendTo($node);
            });     
        });
    },
    OperateInjecte:function () {
          $(\'#fileupload\').fileupload({
            url:ImageUpload.imageUrl ,
            dataType: \'json\',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 999000,
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true,
        })
            .on(\'fileuploadadd\', function (e, data) {
                var $uploadInfo = $(\'#fileupload\').siblings(".uploadInfo");
                var $uploadInfoParts = $uploadInfo.children(".uploadPart:last")
                var showDivId = $uploadInfoParts.attr("attr-show");
                var progressId = $uploadInfoParts.attr("attr-progress");
                var uploadBt= $uploadInfoParts.attr("attr-bt");
                var removeBt= $uploadInfoParts.attr("attr-removeBt");
                var groupGuidInput= $uploadInfoParts.attr("attr-groupGuidInput");
                var $showDiv = $(\'#\' + showDivId);
                var $progress = $(\'#\' + progressId);
                var $uploadBt = $(\'#\' + uploadBt);
                var $removeBt = $(\'#\' + removeBt);
                var $groupGuidInput = $(\'#\' + groupGuidInput);
                $progress.show();
                data.context = $(\'<div/>\').appendTo($showDiv); 
                data.uploadBt = $uploadBt;
                data.uploadBt.attr("disabled", "disabled")
                data.removeBt=$removeBt;
                data.groupGuidInput=$groupGuidInput;
                $.each(data.files, function (index, file) {
                    var uploadErrors = [];
                    if (file[\'size\'] > 20971520) {
                        uploadErrors.push(\'文件不能大于20M\');
                    }
                    var acceptFileTypes = /(\.|\/)?(gif|jpe?g|png|pdf|vnd\.openxmlformats|application\/msword|application\/vnd\.openxmlformats\-officedocument\.wordprocessingml\.document|application\/vnd\.ms\-excel|application\/vnd\.openxmlformats\-officedocument\.spreadsheetml\.sheet)$/i;
                    if (!acceptFileTypes.test(file[\'type\'])) {
                        uploadErrors.push(\'文件类型不正确,请上传图片、pdf、word、excel文件\');
                    }
                    if (uploadErrors.length > 0) {
                        node = $(\'<p/>\')
                            .append($(\'<span class="text-danger"/>\').text(uploadErrors.join("\n")));
                        node.appendTo(data.context);
                        return;
                    }
                    $progress.show();
                    data.submit()
                        .always(function () {
                            $progress.hide();
                            data.uploadBt.removeAttr("disabled");
                            if (!index) {
                                node = $(\'<p/>\')
                                node.appendTo(data.context);
                            }
                        });
                });
            })
            .on(\'fileuploadprocessalways\', function (e, data) {
                var index = data.index,
                file = data.files[index],
                $node = $(data.context);
                if (file.preview) {
                    ImageLoad.loadFileImageToPriview(file, function($img){ 
                        $node.prepend($img);
                    });
                }
                if (file.error) {
                   //node.append($(\'<p/>\'))
                       // .append($(\'<span />\').text("非图片类型，无缩略图！"));
                }
            })
            .on(\'fileuploadprogressall\', function (e, data) {
                var $uploadInfo = $(\'#fileupload\').siblings(".uploadInfo");
                var $uploadInfoParts = $uploadInfo.children(".uploadPart:last")
                var progressId = $uploadInfoParts.attr("attr-progress");
                var $progress = $(\'#\' + progressId);
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $progress.find(\' .progress-bar\').css(
                    \'width\',
                    progress + \'%\'
                );
            })
            .on(\'fileuploaddone\', function (e, data) {
                node = $(\'<p/>\');
                file = data.files[0];
                var $fileupload = $(\'#fileupload\');
                var $fileuploadInfo = $fileupload.siblings(".uploadInfo:first");
                var $fileuploadInfoTarget = $fileuploadInfo.children("input:last");
                
                if (data.result) {
                    var groupId = data.result[0].groupID;
                    $fileuploadInfoTarget.attr("attr-groupId", groupId);
                    data.groupGuidInput.val(groupId).trigger("change");
                    data.uploadBt.hide();
                    data.removeBt.show();
                    node
                        .append($(\'<a href="\'+ImageUpload.imageUrl+\'?g=\'+groupId+\'&j=false"  target="_blank" class="pull-left py-2"/>\').text(file.name+":上传成功"));
                }
                else {
                    data.uploadBt.show();
                    data.groupGuidInput.val("").trigger("change");
                    node
                        .append($(\'<span class="text-danger"/>\').text(file.name +\':上传失败\'));
                }
                node.appendTo(data.context);
            })
            .on(\'fileuploadfail\', function (e, data) {
                file = data.files[0];
                node = $(\'<p/>\')
                    .append($(\'<span class="text-danger"/>\').text(file.name +\':上传失败\'));
                node.appendTo($(data.context));
            })
            .prop(\'disabled\', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : \'disabled\');
    }
}

var ImageLoad = {
    Init:function(maxWidth,maxHeight,minWidth,minHeight,canvas){
        ImageLoad.maxWidth=maxWidth;
        ImageLoad.maxHeight=maxHeight;
        ImageLoad.minWidth=minWidth;
        ImageLoad.minHeight=minHeight;
        ImageLoad.canvas=canvas;
    },
    maxWidth:100,
    maxHeight:100,
    minWidth:50,
    minHeight:50,
    canvas:true,
    loadUrlImageToPriview: function (url,callback)
    {
        loadImage(
            url,
            function (img) {
                 if (typeof (callback) === "function") {
                        callback($(img));
                 }
                
            },
            {
                maxWidth:  ImageLoad.maxWidth,
                maxHeight: ImageLoad.maxHeight,
                minWidth: ImageLoad.minWidth,
                minHeight: ImageLoad.minHeight,
                canvas: ImageLoad.canvas
            }
        );
    },
    loadFileImageToPriview: function (file,callback) {
        loadImage(
            file,
            function (img) {
                if (typeof (callback) === "function") {
                        callback($(img));
                 }
            },
            {
                maxWidth:  ImageLoad.maxWidth,
                maxHeight: ImageLoad.maxHeight,
                minWidth: ImageLoad.minWidth,
                minHeight: ImageLoad.minHeight,
                canvas: ImageLoad.canvas
            }
        );
    },
    blobToFile: function (file, $node)
    {
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
    }
}