<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery多图片上传预览</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .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; } </style> </head> <body> <form method="post" action="" id="passForm" enctype="multipart/form-data" multipart=""> <!--点击预览图片--> <div id="Pic_pass"> <p><span style="color: red">注：每张照片大写不可超过4M，且最多可以传十张</span></p> <div class="picDiv"> <div class="addImages"> <!--multiple属性可选择多个图片上传--> <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> <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 = '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(); }); }); </script> </body> </html>
