<!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‘) { ???????????$.messager.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>上传图片和预览
原文地址：http://www.cnblogs.com/xhliang/p/7754386.html