文档章节

input file图片上传

o
 osc_x4h57ch8
发布于 2018/04/24 14:28
字数 401
阅读 0
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

<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: 0;
        opacity: 0;
    }
    .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: 9;
  }
  .photo-add img{
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
  }
  .photo-add .closeIcon{
      position: absolute;
      top: 0;
      background: red;
      height: 20px;
      width: 100%;
      display: none;
  }
  .photo-add .closeIcon .delPhoto-btn{
      position: absolute;
      right: 0;
      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();
};

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

未捕获ReferenceError:未定义$? - Uncaught ReferenceError: $ is not defined?

问题: How come this code throws an 此代码如何引发 Uncaught ReferenceError: $ is not defined 未捕获的ReferenceError:未定义$ when it was OK before? 以前什么时候可以? $(document......

javail
43分钟前
12
0
263. Ugly Number

题目: 263. Ugly Number 题目地址:https://leetcode.com/problems/ugly-number/ Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers......

JiaMing
今天
60
0
HCIA_ARP01

ARP(地址解析协议) eNSP 常用路由器:AR2220 常用交换机:S5700、S3700 常用终端:PC、MCS(主播服务器) 设备连线:Copper(以太网用到的双绞线)、Serial(串口线,2SA接口)、Auto(自动连...

创业789
今天
25
0
如何在Rails 4中使用问题 - How to use concerns in Rails 4

问题: The default Rails 4 project generator now creates the directory "concerns" under controllers and models. 默认的Rails 4项目生成器现在在控制器和模型下创建目录“Concer”。 ......

fyin1314
今天
19
0
【LeetCode】 57 括号生成

题目: 解题思路: https://leetcode-cn.com/problems/generate-parentheses/solution/hui-su-suan-fa-by-liweiwei1419/ 代码: import java.util.ArrayList;import java.util.List;publ......

JaneRoad
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部