jquery多图上传预览
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(); }); });