帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery图片上传前预览
jQuery图片上传前预览
浏览:505次
-
评论:0次
-
发布时间:2017-03-27
Html
Css
Js
点击这里上传图片
图片预览
jQuery.DuoImgsYulan = function(file, id) { for (var i = 0; i < 3; i++) { if (!/image\/\w+/.test(file[i].type)) { alert("请选择图片文件"); return false; } if (file[i].size > 2048 * 1024) { alert("图片不能大于2MB"); continue; } var img; console.log(document.getElementById("fileImg")); console.log(file[i]); console.log("file-size=" + file[i].size); var reader = new FileReader(); reader.onloadstart = function(e) { console.log("开始读取...."); } reader.onprogress = function(e) { console.log("正在读取中...."); } reader.onabort = function(e) { console.log("中断读取...."); } reader.onerror = function(e) { console.log("读取异常...."); } reader.onload = function(e) { console.log("成功读取...."); var div = document.createElement("div"); //外层 div div.setAttribute("style", "position:relative;width:inherit;height:inherit;float:left;z-index:2;width:150px;margin-left:8px;margin-right:8px;"); var del = document.createElement("div"); //删除按钮div del.setAttribute("style", "position: absolute; bottom: 4px; right: 0px; z-index: 99; width: 30px; height:30px;border-radius:50%;") var delicon = document.createElement("img"); delicon.setAttribute("src", "http://www.jq22.com/tp/f26c324f-24db-4f08-91d6-f7ffc9ca1516.png"); delicon.setAttribute("title", "删除"); delicon.setAttribute("style", "cursor:pointer;width: 30px; height:30px"); del.onclick = function() { this.parentNode.parentNode.removeChild(this.parentElement); ClearfirtsImg(); }; del.appendChild(delicon); div.appendChild(del); var imgs = document.createElement("img"); //上传的图片 imgs.setAttribute("name", "loadimgs"); imgs.setAttribute("src", e.target.result); imgs.setAttribute("width", 150); if (document.getElementById(id).childNodes.length > 2) { document.getElementById(id).removeChild(document.getElementById(id).firstChild); } div.appendChild(imgs) document.getElementById(id).appendChild(div); } reader.readAsDataURL(file[i]); } } function FirstImg() { $.DuoImgsYulan(document.getElementById("FirstfileImg").files, "ccc"); } function ClearfirtsImg() { var file = $("#FirstfileImg") file.after(file.clone().val("")); file.remove(); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.9.1
<!doctype html><html><head><meta charset="utf-8"><title>jQuery图片上传前预览-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery图片上传前预览,带删除
纯CSS3实现标题线框动效
javript打印文本
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
505
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值