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的根目录 ...
随机推荐
- QString字符串中双引号的梗
[1]QString字符串不支持双引号 最近做项目(本地环境:WIN10 + QT5.9.2 + VS2017).有个需求,需要实现形如 "key="123456"&qu ...
- 联想拯救者win10+ubuntu14.04
之前是win10+win7,默认win10启动,win7所在磁盘直接格式化即可(如果是win10+unbuntu不能这么搞,据说会导致win10也起不来) 按F2进bios 除了按这里fast boo ...
- MySQL存储引擎MyISAM与InnoDB区别总结整理
在MySQL的 可重复读隔离级别 中,是解决了幻读的读问题的. 1. MySQL默认存储引擎的变迁 在MySQL 5.5之前的版本中,默认的搜索引擎是MyISAM,从MySQL 5.5之后的版本中,默 ...
- C++中set用法详解
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...
- bzoj3196 二逼平衡树
题目链接 平衡树系列最后一题 坑啊 10s时间限制跑了9764ms...还是要学一学bit套主席树啦... 经典的线段树套treap...至于第一发为什么要TLE(我不会告诉你treap插入的时候忘了 ...
- Oracle执行计划 explain plan
Rowid的概念:rowid是一个伪列,既然是伪列,那么这个列就不是用户定义,而是系统自己给加上的. 对每个表都有一个rowid的伪列,但是表中并不物理存储ROWID列的值.不过你可以像使用其它列那样 ...
- 记账本微信小程序开发二
新建一个微信小程序项目 熟悉软件各种操作.
- 模拟ATM的功能
import java.io.FileReader; import java.io.FileWriter; import java.io.PrintWriter; import java.util.A ...
- 案例:配置apache和nginx的SSL加密传输协议
一.SSI解释 SSI是一种类似于ASP的基于服务器的网页制作技术.将内容发送到浏览器之前,可以使用“服务器端包含 (SSI)”指令将文本.图形或应用程序信息包含到网页中.例如,可以使用 SSI 包含 ...
- java中BufferedImage类的用法
1. BufferedImage是Image的一个子类,Image和BufferedImage的主要作用就是将一副图片加载到内存中. BufferedImage生成的图片在内存里有一个图像缓冲区,利用 ...