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("\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;
}
}
bootstrap图片上传功能的更多相关文章
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
- 给DEDECMS广告管理中增加图片上传功能
dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
随机推荐
- python mmap对象
----使用内存映射的原因 为了随机访问文件的内容,使用mmap将文件映射到内存中是一个高效和优雅的方法.例如,无需打开一个文件并执行大量的seek(),read(),write()调用,只需要简单的 ...
- 蒙特卡洛（Monte Carlo）法求定积分
https://blog.csdn.net/baimafujinji/article/details/53869358
- 设计模式之Decorator（油漆工）（转）
Decorator常被翻译成"装饰",我觉得翻译成"油漆工"更形象点,油漆工(decorator)是用来刷油漆的,那么被刷油漆的对象我们称decoratee.这 ...
- Javascript原生之用cssText批量修改样式
一般情况下我们用js设置元素对象的样式会使用这样的形式: var element= document.getElementById(“id”);element.style.width=”20px”;e ...
- I2S接口介绍
I2S接口介绍一.I2S协议介绍 I2S协议作为音频数据传输协议,由Philips制定.该协议由三条数据线组成:1.SCLK:串行时钟,频率= 2 * 采样频率 * 采样位数.2.WS:字段(声道)选 ...
- scss简单用法
- How to use CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation
How to use Heavy Duty Diagnostic CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation Here i ...
- logger日志模块
简单配合模式: import logging#简单配置logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s ...
- 算法竞赛入门经典训练指南——UVA 11300 preading the Wealth
A Communist regime is trying to redistribute wealth in a village. They have have decided to sit ever ...
- right spindle supply short to gnd-- compact version
hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...