input file图片上传
<div class="div-title">
<h5>图片上传</h5>
<div class="photo-box">
<div class="photo-box-icon">
<img style="width: 100%;" src="<%=staticServPath%>/static/img/H5_addPhoto.png" alt="picture">
<input type="file" onchange="angular.element(this).scope().addPhoto(this)" accept="image/*" id="carPhotoFile" />
</div>
</div>
</div>
/*图片上传*/
.photo - box {
padding: 10 px;
display: inline - block;
}
.photo - box - icon {
width: 50 px;
height: 50 px;
display: inline - block;
position: relative;
}
.photo - box - icon img {
width: 100 % ;
height: 100 % ;
}
.photo - box - icon input {
width: 50 px;
height: 50 px;
position: absolute;
top:;
opacity:;
}
.photo - add {
width: 230 px;
height: 100 px;
display: inline - block;
margin - right: 10 px;
margin - bottom: 10 px;
border: 1 px solid #32c5d2;
position: relative;
z-index:;
}
.photo-add img{
width: 100%;
height: 100%;
background-size: 100% 100%;
}
.photo-add .closeIcon{
position: absolute;
top:;
background: red;
height: 20px;
width: 100%;
display: none;
}
.photo-add .closeIcon .delPhoto-btn{
position: absolute;
right:;
width: 20px;
height: 18px;
top: 1px;
text-align: center;
cursor: pointer;
}
$scope.addPhoto = function(file) {
var fileObj = file.files[0];
var formData = new FormData();
formData.append('file', fileObj);
var options = {
url: webroot + "/services/api/file/uploadImg",
type: 'POST',
data: formData,
processData: false,
contentType: false,
headers: {
'ticket': ticket
},
success: function(rsp) {
if (rsp.code == 200) {
imgs = rsp.result;
var innerHtml = '<div class="photo-add" onchange="angular.element(this).scope().showPhoto(this)">' +
'<img style = "width: 100%;" src="' + imgs + '" alt = "添加照片" class="photoShow" />' +
'</div>';
$(".photo-box").before(innerHtml);
attachmentArr.push(rsp.result);
} else {
console.log(rsp.message);
}
},
error: function(e) {
console.log("网络错误!");
}
};
$.ajax(options);
};
var attachmentArr = []; function addPhoto(file) {
var fileObj = file.files[0];
var formData = new FormData();
formData.append('file', fileObj);
var options = {
url: webroot + "/upload/uploadImg",
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(rsp) {
if (rsp.code == 200) {
imgs = rsp.result;
var innerHtml = '<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">' +
'<img style = "width: 100%;" src="' + imgs + '" alt = "添加照片" class="photoShow" />' +
'<div class="closeIcon">' +
'<span class="delPhoto-btn" onclick="delPhoto(this)">' + "X" +
'</span>' +
'</div>' +
'</div>';
$(".photo-box").before(innerHtml);
attachmentArr.push(rsp.result);
// 超过两张图片隐藏图标
// if (attachmentArr.length >= 2) {
// $('.photo-box-icon').hide();
// };
} else {
hint(rsp.message);
}
},
error: function(e) {
console.log("网络错误!");
}
};
$.ajax(options);
};
//删除图标显隐
function IconShow(e) {
$(e).children('.closeIcon').show();
}; function IconHide(e) {
$(e).children('.closeIcon').hide();
};
//图片删除
function delPhoto(e) {
var thisImage = $(e).parent().parent().find('img').attr("src");
attachmentArr.remove(thisImage);
$(e).parent().parent().remove();
};
input file图片上传的更多相关文章
- input file 图片上传
使用第三方:jquery.ajaxfileupload.jsinput中的name根据后端来定 <form method="post" enctype="multi ...
- form input file 图片上传360IE兼容问题
<form action="" class="form-box" class="form_box" enctype="mul ...
- input file图片上传预览
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
- input file图片上传预览效果
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
- input file 图片上传展示重新上传
html <div> <label class="imgMark">说明:</label> <div class="erWeiM ...
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- PHP 多input file文件上传
前台html jquery代码 后台PHP处理 前台html <form id="form" method="post" enctype="mu ...
- file图片上传之前先预览
链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...
随机推荐
- Javascript高级编程学习笔记(55)—— DOM2和DOM3(7)操作范围
操作范围中的内容 在创建范围时,内部会为这个范围创建一个文档片段 范围所属的全部节点都会被添加到这个片段中 虽然选取范围可以不是完整的.良好的DOM结构 但是在这个为范围创建的文档片段中,会自己完缺少 ...
- Kali学习笔记21:缓冲区溢出实验(漏洞发现)
上一篇文章,我已经做好了缓冲区溢出实验的准备工作: https://www.cnblogs.com/xuyiqing/p/9835561.html 下面就是Kali虚拟机对缓冲区溢出的测试: 已经知道 ...
- 使用本地缓存快还是使用redis缓存好?
使用本地缓存快还是使用redis缓存好? Redis早已家喻户晓,其性能自不必多说. 但是总有些时候,我们想把性能再提升一点,想着redis是个远程服务,性能也许不够,于是想用本地缓存试试!想法是不错 ...
- idea 过段时间java程序包不存在问题 ?
有时候我们在导入程序之后,系统会给出错误提示:Java:程序包xxxx不存在,现在我这里有一招,就是使用IDEA自动导入Java程序包,这也是IDEA的一大优点. 但是在看到这个问题的文章的时候,并不 ...
- 两步验证杀手锏:Java 接入 Google 身份验证器实战
两步验证 大家应该对两步验证都熟悉吧?如苹果有自带的两步验证策略,防止用户账号密码被盗而锁定手机进行敲诈,这种例子屡见不鲜,所以苹果都建议大家开启两步验证的. Google 的身份验证器一般也是用于登 ...
- mybatis框架(4)---输入输出映射
输入输出映射 通过parameterType制定输入参数类型 类型可以是简单类型(int String)也可以是POJO本身 或者包装类 1输入映射 关于输入简单类型和pojo本身的我就不写了,因为比 ...
- Android内存管理篇 - adj的概念与进程adj级别控制
本文主要介绍Android的lowmemorykiller的oom_adj的相关概念,以及根据一些案例来阐述了解oom_adj对于做Android应用开发的重要意义. 一.lowmeorykiller ...
- android项目架构 -----Android 知识体系与常用第三方框架
好东西值得分享 ,这是网络上总结的一些开源的东西直接就拿过来了 .... Android通用流行框架大全 先把这张图放在这 ,先来谈一谈项目结构 .我喜欢将东西按模块来划分: 都知道module . ...
- tensorflow 1.12.0 gpu + python3.6.8 + win10 + GTX1060 + cuda9.0 + cudnn7.4 + vs2017)
在安装tensorflow-gpu时,也看过不少的博客,讲得乱七八糟的,也不能这样说,只是每个人安装的环境或需求不一样,因此没有找到一个适合自己的教程去安装tensorflow-gpu版本.当然,入手 ...
- 区块链--Ubuntu上搭建以太坊私有链
1.搭建私链所需环境 操作系统:ubuntu16.04,开虚拟机的话要至少4G,否则会影响测试挖矿时的速度 软件: geth客户端 Mist和Ethereum Wallet:https://githu ...