上传图片并预览限制个数

html：

<div class="img-up"><!--上传的图片--><div class="imgbox"><!--<div class="imgContainer">--><!--<img src="img/signin_bg.png" class="loadPics" alt="">--><!--<img src="img/shanchu2.png" class="up-sc" alt="">--><!--<div class="up-line">--><!--<div class="success-line"></div>--><!--</div>--><!--</div>--></div><div class="upbox"><div class="upBtn"><span class="up-text">点击添加图片</span><input type="file" class="upPic" accept="image/*" multiple=""></div><div class="upLimit">(支持上传1~5张图片）</div></div>
</div>

js：

// 上传图片
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型$(".upPic").change(function() {// 获取当前已上传张数var hasNum = $('.imgContainer').length;console.log(hasNum);//获取选择图片的对象var docObj = $(this)[0];var picDiv = $(".imgbox");//得到所有的图片文件var fileList = docObj.files;var fileLength = fileList.length;console.log(fileLength - hasNum)
//var fileSize = fileList[0].size;//图片大小限制//if((fileSize/1024).toFixed(0)>2048){//$.msgBox.alert("图片大小不超过2M！")
//}else{

    if(fileLength > 5){$.msgBox.alert('最多可上传5张图片哦！');}else if(fileLength > (5 - hasNum)){//总张数不能超过5张$.msgBox.alert('最多还可上传'+(5 - hasNum)+'张图片哦！');}else {//循环遍历for (var i = 0; i < fileLength; i++) {//动态添加html元素var picHtml = ' <div class="imgContainer">\n' +'                            <img src="img/signin_bg.png" id="img'+fileList[i].name+'" class="loadPics" alt="">\n' +'                            <img src="img/shanchu2.png" class="up-sc" alt="">\n' +'                            <div class="up-line">\n' +'                                <div class="success-line"></div>\n' +'                            </div>\n' +'                        </div>'picDiv.prepend(picHtml);//获取图片imgi的对象var imgObjPreview = document.getElementById("img" + fileList[i].name);if (fileList && fileList[i]) {//图片属性//imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式if (userAgent.indexOf('MSIE') == -1) {//IE以外浏览器imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;console.log(imgObjPreview.src);// var msgHtml = '<input type="file" id="fileInput" multiple/>';} else {//IE浏览器if (docObj.value.indexOf(",") != -1) {var srcArr = docObj.value.split(",");imgObjPreview.src = srcArr[i];} else {imgObjPreview.src = docObj.value;}}}}$('.success-line').animate({'width':'100%'},function () {$(this).parent().css('display','none')})}/*删除功能*/$(".up-sc").click(function() {var _this = $(this);_this.parents(".imgContainer").remove();});
});

上传图片并预览限制个数相关推荐

本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
JavaScript上传图片及时预览
JavaScript上传图片及时预览 /*******************************正面图片上传预览开始****************************/ f ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列谷歌火狐等浏览器注意:不支持safari 插件使用说明: 1.必须引用jquery ...
ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
js上传图片进行预览
js上传图片进行预览上传图片经常遇到这样的问题,就是需要实现预览,由于浏览器的安全机制,不能直接读取本地文件,所以需要使用js绕一圈实现预览效果 HTML代码如下 <input type=&q ...
thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览一.具体需求如图所术: 二.html代码: 三.js代码四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...
h5页面上传图片java_[Java教程]h5上传图片及预览_星空网
h5上传图片及预览 2016-04-22 0 第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需 ...

上传图片并预览限制个数

上传图片并预览限制个数相关推荐

最新文章

热门文章

上传图片并预览 限制个数

上传图片并预览 限制个数相关推荐

最新文章

热门文章

上传图片并预览限制个数

上传图片并预览限制个数相关推荐