文档章节

上传图片插件-图片上传

羊皮卷
 羊皮卷
发布于 2016/04/09 16:50
字数 491
阅读 72
收藏 0
css

.message-content {position: relative;  background-color: white;  min-height: 270px;  }
.file span {  position: absolute;  font-size: 6rem;  }
.con-img {  position: absolute;  height: 5rem;  width: 5rem;  }
.con-img img {  width: 100%;  }
.img-ul li {  position: relative;  display: inline-block;  height: 6rem;  width: 24%; 
 line-height: 6rem;  }
#exampleInputFile {position: absolute;height: 5rem;width: 5rem;opacity: 0;  }
.demo-1 {  position: relative;  margin: 1rem;  }
.send {  position: relative;  display: block;  background-color: #fe4250; 
 border-radius: 5px;  width: 90%;  height: 38px;  line-height: 38px;  margin-left: auto; 
  margin-right: auto;  color: white;  }

.upload_area{ margin:0 auto; display:inline-block; width:100%; }
.upload_area .post_imglist li {position: relative;float: left;padding: 0 10px 5px 0;
line-height: 38px; margin:0;}
.upload_area .post_imglist li .del {position: absolute;right: 5px;top: -10px;
background: url(../images/icon_del.png) no-repeat;background-size: contain;width:1.8rem;
height: 1.8rem;display: inline-block; }
.upload_area .post_imglist li .p_img img {padding: 2px;border: 1px solid #DDD;
height: 4rem;width: 4rem; }
.upload_area .post_imglist li .pic_time {display: inline-block;width: 60px;height: 60px;
position: relative; }
.upload_area .post_imglist li .pic_time em {display: inline-block;width: 100%;height: 25%;
line-height: 15px;font-size: 1.2rem;color: #fff;background-color: #F1484A;
position: absolute;top: 2rem;left: 0; }
.upload_area .upload_btn {background: url(../images/upload_btn.png) center no-repeat;
background-size: 6rem auto;float: left;overflow: hidden;position: relative;width: 6rem;
height: 6rem;}
.upload_area .upload_btn input {opacity: 0;position: absolute;left: 0;top: 0;z-index: 10;
overflow: hidden;height:6rem;width:6rem; }
#imglist li img.wh60 {margin: 0 auto;display: block;width: 6rem;height: 6rem;}
#imglist1 li img.wh60 {margin: 0 auto;display: block;width: 6rem;height: 6rem;}



html

<script src="js/jquery-1.7.2.min.js"></script>
<div class="message-content">
    <div class="demo-1 clearfix">
        <dd class="upload_area fl">
            <ul id="imglist" class="post_imglist">
            </ul>
            <div class="upload_btn">
                <input type="file" id="upload_image" value="图片上传" 
                accept="image/jpeg,image/gif,image/png" capture="camera">
            </div>
        </dd>
    </div>
</div>
<script src="js/localResizeIMG2.js" type="text/javascript"></script>
<script src="js/mobileBUGFix.mini.js" type="text/javascript"></script>
<script type="text/javascript">
    (function () {
        var viewImg = $("#imglist");
        var imgurl = '';
        var imgcount = 0;
        $('#upload_image').localResizeIMG({
            width: 640,
            quality: 0.8,
            success: function (result) {
                var status = true;
                if (result.height > 1600) {
                    status = false;
                    alert("照片最大高度不超过1600像素");
                }
                if (viewImg.find("li").length > 5) {
                    status = false;
                    alert("最多上传6张照片");
                }
                if (status) {
                    viewImg.append('<li><span class="pic_time"><span class="p_img"></span><em>50%</em></span></li>');
                    viewImg.find("li:last-child").html('<span class="del"></span><img class="wh60" src="' + result.base64 + '"/><input type="hidden" id="file'
                            + imgcount
                            + '" name="fileup[]" value="'
                            + result.clearBase64 + '">');
                    $(".del").on("click",function(){
                        $(this).parent('li').remove();
                        $("#upload_image").show();
                        if(viewImg.find("li").length <=5){
                            $(".upload_btn").show();
                        }

                    });
                    if(viewImg.find("li").length >5){
                        $(".upload_btn").hide();
                    }
                    imgcount++;
                }
            }
        });
    })();
</script>





//本文来源于网络,本人总结起来并优化,分享给有需要的前端朋友,如有侵权,请联系删除,也请指正、批评

© 著作权归作者所有

上一篇: 选择地址
下一篇: jq弹出层
羊皮卷
粉丝 3
博文 166
码字总数 84410
作品 0
广州
前端工程师
私信 提问
Thinkphp使用jQuery File Upload异步上传图片实例教程(1):上传单张图片

图片上传是很多网站必备的功能之一,异步多图上传也是很多初学者比较头疼的问题。所以今天我们就使用比较热门的Thinkphp和jquery File upload插件完整的开发一个多图异步上传功能。 这篇文章...

星空幻颖
2017/02/12
0
0
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
NodeBB Upyun Uploads 插件开源,保存图片至又拍云

NodeBB 上传插件 NodeBB Upyun Uploads 发布,主要作用是将图片上传至又拍云,无论是发布主题时插入的图片,还是在 Profile 上上传的背景图片,都会上传至又拍云。 插件的介绍和安装使用方式...

又拍云
2016/12/12
1K
2
php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例

博客已转移到:http://blog.phpue.com/Article/index/id/13.html 这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的。用的还不熟练,所以今天就用a...

3147972
2014/03/17
0
0
Javascript 异步上传插件--AjaxUpload

AjaxUpload: Javascript 异步上传插件,包含 3 个子项目 BUpload, JUpload, TUpload, 你可以根据项目的需求选择使用: BUpload : 基于HTML5, UI仿百度编辑器的图片上传, 支持图片上传,在线...

阳建
2017/09/15
774
4

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 如果是个帅小伙你愿意和他出去吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Ghost 》游戏《死亡搁浅》原声 《Ghost 》游戏(《死亡搁浅》原声) - Au/Ra / Alan Walker 手机党少年们想听歌,请使劲儿戳...

小小编辑
今天
165
6
java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
16
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部