重点：
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("\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;
}
}