jquery实现图片上传

如果页面中有使用LayUi框架需要上传多张图片时需要删除form 中 class=“layui-form” ，不然上传不了多张图片

<style>.imageDiv {display:inline-block;width:100px;height:100px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px dashed darkgray;background:#f8f8f8;position:relative;overflow:hidden;margin:10px}.cover {position:absolute;z-index:1;top:0;left:0;width:100px;height:100px;background-color:rgba(0,0,0,.3);display:none;line-height:125px;text-align:center;cursor:pointer;}.cover .delbtn {color:red;font-size:10px;}.imageDiv:hover .cover {display:block;}.addImages {display:inline-block;width:100px;height:100px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px dashed darkgray;background:#f8f8f8;position:relative;overflow:hidden;margin:10px;}.text-detail {margin-top:10px;text-align:center;}.text-detail span {font-size:40px;}.file {position:absolute;top:0;left:0;width:100px;height:100px;opacity:0;}
</style><div style="width: 70%;margin: 0 auto"><div id="Pic_pass"><p style="font-weight: bold;">请上传图片</p><p><span style="color: red">注：每张图片大小不可超过4M，一次最多可以上传4张,多张上传时必须按住ctrl选中</span></p><div class="picDiv"><div class="addImages"><input type="file" class="file" name="file[]" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg"><div class="text-detail"><span>+</span><p>点击上传</p></div></div></div></div><div class="msg" style="display: none;"></div>
</div><script>//图片上传预览功能var userAgent = navigator.userAgent; //用于判断浏览器类型$(".file").change(function() {//获取选择图片的对象var docObj = $(this)[0];var picDiv = $(this).parents(".picDiv");//得到所有的图片文件var fileList = docObj.files;//循环遍历for (var i = 0; i < fileList.length; i++) {//动态添加html元素var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";// console.log(picHtml);picDiv.prepend(picHtml);//获取图片imgi的对象var imgObjPreview = document.getElementById("img" + fileList[i].name);if (fileList && fileList[i]) {//图片属性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '100px';imgObjPreview.style.height = '100px';//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;}}}}/*删除功能*/$(".delbtn").click(function() {var _this = $(this);_this.parents(".imageDiv").remove();});});
</script>

删除图片：

jquery实现图片上传相关推荐

php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
springMVC+jquery实现图片上传
需要的jar包,添加maven依赖 <dependency><groupId>commons-fileupload</groupId><artifactId& ...
jquery实现图片上传预览
页面上就是一个文件域:<input type = "file" id = "img"/> 加上一个img标签<img src ="& ...
jQuery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
html图片上传阅览并且点击放大
关闭 qq_31540195的博客目录视图摘要视图订阅异步赠书:9月重磅新书升级,本本经典程序员9月书讯每周荐书:ES6.虚拟现实.物联网(评论送书) htm ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
jquery插件：图片上传按比例预览
js部分是这样的: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:id ...
php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切，模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 [csharp] view plaincopy <%@ Page Language="C#" AutoEventWireup=" ...

jquery实现图片上传

删除图片：

jquery实现图片上传相关推荐

最新文章

热门文章