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;
weixin_38622475
- 粉丝: 0
- 资源: 913
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- 2023年中国辣条食品行业创新及消费需求洞察报告.pptx
- 2023年半导体行业20强品牌.pptx
- 2023年全球电力行业评论.pptx
- 2023年全球网络安全现状-劳动力资源和网络运营的全球发展新态势.pptx
- 毕业设计－基于单片机的液体密度检测系统设计.doc
- 家用清扫机器人设计.doc
- 基于VB+数据库SQL的教师信息管理系统设计与实现 计算机专业设计范文模板参考资料.pdf
- 官塘驿林场林防火（资源监管）“空天地人”四位一体监测系统方案.doc
- 基于专利语义表征的技术预见方法及其应用.docx
- 浅谈电子商务的现状及发展趋势学习总结.doc
- 基于单片机的智能仓库温湿度控制系统 (2).pdf
- 基于SSM框架知识产权管理系统 (2).pdf
- 9年终工作总结新年计划PPT模板.pptx
- Hytera海能达CH04L01 说明书.pdf
- 数据中心运维操作标准及流程.pdf
- 报告模板 -成本分析与报告培训之三.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0