jquery多图上传预览
2020-07-12 17:12
141 查看
html部分
<form method="post" action="" id="passForm" enctype="multipart/form-data" multipart=""> <div id="Pic_pass"> <p style="font-size: 20px;font-weight: bold;">请上传护照详细照片 </p> <p><span style="color: red">注:每张照片大写不可超过4M,且最多可以传十张</span></p> <div class="picDiv"> <div class="addImages"> <input type="file" class="file" id="fileInput" 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> </form>
css部分
.imageDiv { display:inline-block; width:160px; height:130px; -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:160px; height:130px; background-color:rgba(0,0,0,.3); display:none; line-height:125px; text-align:center; cursor:pointer; } .cover .delbtn { color:red; font-size:20px; } .imageDiv:hover .cover { display:block; } .addImages { display:inline-block; width:160px; height:130px; -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:40px; text-align:center; } .text-detail span { font-size:40px; } .file { position:absolute; top:0; left:0; width:160px; height:130px; opacity:0; }
js部分
//图片上传预览功能 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 = '160px'; imgObjPreview.style.height = '130px'; //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(); }); });
转载于:https://www.cnblogs.com/renewload/p/11225142.html
相关文章推荐
- 利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
- jquery实现页面无刷新动态上传图片预览功能
- Jquery 上传图片预览
- jquery实现图片上传时预览
- Jquery 上传图片预览,等比例缩放
- jQuery插件imgPreviewQs实现上传图片预览
- jquery图片上传预览插件uploadView
- jQuery+HTML5实现图片上传前预览效果
- jquery.uploadify插件实现上传和预览效果
- jquery插件:图片上传按比例预览
- jquery 实现 图片上传 预览
- JS,jQuery轻松实现input图片上传预览功能
- 基于jquery实现的上传图片及图片预览效果代码
- 使用jQuery在上传图片之前实现缩略图预览
- 基于SSH2框架下jquery插件ajaxfileupload文件上传,下载,预览(.doc)实例
- [jQuery+Html5]上传图片预览Image
- jQuery 实现 图片上传预览
- 在BAE搭建的Django中实现图片上传并用jquery预览图片
- jQuery实现上传图片前预览效果功能
- jquery实现兼容浏览器的图片上传本地预览功能