bootstrap fileinput插件实现预览上传照片功能
17 浏览量
2020-08-28
04:36:55
上传
评论
收藏 62KB PDF 举报
bootstrap fileinput插件实现预览上传照片功能插件实现预览上传照片功能
主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
效果图如下所示：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="bootstrap-fileinput.css" rel="external nofollow" >
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-fileinput.js"></script>
</head>
<body>
<div class="form-group">
<div class="col-md-8">
<div class="fileinput fileinput-new" data-provides="fileinput" id="uploadImageDiv">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="${companyInfo.image}" alt="" />
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn default btn-file"> <span
class="fileinput-new">选择图片</span> <span class="fileinput-exists">更改</span> <input type="file" name="uploadImage" id="uploadImage" /></span>
<a href="#" rel="external nofollow" class="btn default fileinput-exists" data-dismiss="fileinput">移除</a>
<span>请选择1M以内图片</span>
</div>
</div>
<div id="titleImageError" style="color: #a94442"></div>
</div>
</div>
</body>
<script>
var handleEvent = function() {
$("#uploadImage").fileupload({
url: "design/resource/uploadFile",
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(gif|jpe?g|png)$/i,
maxFileSize: 1000000, // 1 MB
imageMaxWidth: 100,
imageMaxHeight: 100,
messages: {
acceptFileTypes: '文件类型不匹配',
maxFileSize: '文件过大',
minFileSize: '文件过小'
}
}).on("fileuploadadd", function(e, data) {
$("#titleImageError").html("");
$("#addBtn,#updateBtn").off("click").on("click", function() {
if($("#dialogForm").validate().form()) {
customGlobal.blockUI("#modalContent");
data.submit()
}
})
}).on("fileuploadprocessalways", function(e, data) {
var index = data.index,
file = data.files[index];
if(file.error) {
$("#titleImageError").html(file.error)
}
$("#addBtn,#updateBtn").prop('disabled', !!data.files.error);
}).on("fileuploaddone", function(e, data) {
if(data.result.returnState == "ERROR") {
toastr.warning(data.result.returnMsg);
customGlobal.ajaxCallback(data);
return;
}
addNews(data.result.returnData.url);
});
}
</script>
</html>
bootstrap-fileinput.css文件：（github目前正在维护中，之后所有代码上传至我的github）
/*!
* Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
* Copyright 2012-2014 Arnold Daniels
* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
*/
.btn-file {
position: relative;
overflow: hidden;
vertical-align: middle;
}
.btn-file > input {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
font-size: 23px;
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
direction: ltr;
}
.fileinput {
display: inline-block;
margin-bottom: 9px;
}
.fileinput .form-control {
display: inline-block;
padding-top: 7px;
资源评论
