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 id="upload_bt1" type="button" class="fileinput-button btn btn-info waves-effect waves-light mr-4">上传附件</button>
                    <button id="remove_bt1" type="button" class="ImgRemove-button btn btn-info waves-effect waves-light mr-4" style="display:none">删除附件</button>
                    <!-- The global progress bar -->
                    <div id="upload_progress1" class="progress" style="display:none">
                        <div class="progress-bar progress-bar-success"></div>
                    </div>
                    <!-- The container for the uploaded files -->
                    <div id="upload_show1" class="files "></div>
                    <input asp-for="BusinessLicence" type="text" style="display:none" class="imageGroupId">
                    <span asp-validation-for="BusinessLicence" class="text-danger validationShow"></span>
                </div>
            </div>








<form asp-controller="upload" asp-action="image" method="post" id="uploadForm">
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" 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-groupId="" 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 $groupGuid=$this.siblings(".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("
")));
                        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;
    }
}