<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>checkbox -value </title> <link rel="stylesheet" href=""> <script src='./jquery-1.7.1.min.js'></script> <style type="text/css"> .showImg {} .showImg img { width: 50px; height: 50px; } </style> </head> <body> <div class="main"> <label for="imgfile"><span class="fakeButton">Insert Images</span></label> <!-- 下面为了避免中文，由上面替换 --> <!-- <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple value="Insert Image" onchange="javascript:setImagePreview();" style="position:absolute;clip:rect(0 0 0 0);"> --> <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple onchange="javascript:setImagePreview();"> <br /> <div id="showImg" class="showImg"></div> </div> <script type="text/javascript"> function setImagePreview() { var imghtml = imgUrls(); if (imghtml === '111') { window.alert('Notice', 'You can upload up to three photos'); return false; } $('#showImg').html(imghtml); } // 限制传递图片的张数 function imgUrls() { var imgsrcs = getUrl(); var imghtml = ''; var len = imgsrcs.length; if (len > 3) { return '111'; } for (var i = 0; i < len; i++) { imghtml += '<img src=' + imgsrcs[i] + ' alt="you have selected"> '; } return imghtml; } function getUrl() { var obj = $('#imgfile')[0].files; var len = obj.length; var imgsrcs = []; for (var i = 0; i < len; i++) { imgsrcs[i] = getObjectURL(obj[i]); } //添加图片路径到img src中进行预览 //不同浏览器下的路径不同 function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } return imgsrcs; } </script> </body> </html>