直接上代码
html页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="Base64Img.js"></script> <style> label { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; cursor: pointer; } /*隐藏默认样式*/ input[id=file] { margin-left: -2000px; height: 0; } /*隐藏默认样式*/ input[id=file1] { margin-left: -2000px; height: 0; } </style> </head> <body> <div> <label for="file" id="upload_file">上传文件</label> <input type="file" accept="image/*" id="file"> <div class="span" id="update_file_label"></div> <input type="hidden" id="base64_output" /> <div class="strong red" id="img_size"></div> <img id="img_prev" src="../images/member/nophoto.gif" style="max- 100%; border: 1px solid gray;"> <label for="file1" id="upload_file1">上传文件</label> <input type="file" accept="image/*" id="file1"> <div class="span" id="update_file_label1"></div> <input type="hidden" id="base64_output1" /> <div class="strong red" id="img_size1"></div> <img id="img_prev1" src="../images/member/nophoto.gif" style="max- 100%; border: 1px solid gray;"> </div> <script> $(function () { $("#file").bind("change", function () { $("#update_file_label").html(this.value); gen_base64('base64_output', 'img_size', 'img_prev', 'file'); }); $("#file1").bind("change", function () { $("#update_file_label1").html(this.value); gen_base64('base64_output1', 'img_size1', 'img_prev1', 'file1'); }); }); </script> </body> </html>
Base64Img.js代码：
function $_(id) { return document.getElementById(id); } /*把图片转成Base64码 @param 参数说明： codeInput:把转好的Base64码存放在哪个控件中 imgSize:图片的大小（单位是KB） imgSrc:点击上传后图片的显示的标签 fileInputId:上传控件的ID */ function gen_base64(codeInput, imgSize, imgSrc, fileInputId) { $_(codeInput).value = ''; $_(imgSize).innerHTML = ''; $_(imgSrc).src = '../images/member/nophoto.gif'; var file = $_(fileInputId).files[0]; if (!/image/w+/.test(file.type)) { alert("请确保文件为图像类型"); return false; } r = new FileReader(); //本地预览 r.onload = function () { $_(codeInput).value = r.result; $_(imgSrc).src = r.result; //$("#img_prev").attr("src", r.result); //$("#img_prev").css("width", "50%"); $_(imgSize).innerHTML = " 图片大小：" + Math.round(r.result.length / 1024 * 1000) / 1000 + " KB"; } r.readAsDataURL(file); } //window.onload = function () { // if (typeof (FileReader) === 'undefined') { // alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"); // $_('upload_file').disabled = true; // } //} //使用demo //<!DOCTYPE html> //<html lang="en"> //<head> // <meta charset="UTF-8"> // <title>上传文件</title> // <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> // <script src="../Scripts/Module/Common/Base64Img.js"></script> // <style> // label { // position: relative; // display: inline-block; // background: #D0EEFF; // border: 1px solid #99D3F5; // border-radius: 4px; // padding: 4px 12px; // overflow: hidden; // color: #1E88C7; // text-decoration: none; // text-indent: 0; // line-height: 20px; // cursor: pointer; // } ///*隐藏默认样式*/ //input[id=file] { // margin-left: -2000px; // height: 0; //} //</style> //</head> //<body> //<div> // <label for="file" id="upload_file">上传文件</label> // <input type="file" accept="image/*" id="file"> // <div class="span" id="update_file_label"></div> // <input type="hidden" id="base64_output" /> // <div class="strong red" id="img_size"></div> // <img id="img_prev" src="../images/member/nophoto.gif" style="max- 100%; border: 1px solid gray;"> //</div> //<script> // $(function () { // $("#file").bind("change", function () { // $("#update_file_label").html(this.value); // gen_base64('base64_output', 'img_size', 'img_prev', 'file'); // }); // }); //</script> //</body> //</html>
最终效果
base64码存在放隐藏控件中，直接用Jquyer获取就可以了