操作方法
新建html文档。
书写hmtl代码。 <form> <!--文件选择input--> <h3>文件选择：</h3> <input class="btn btn-default" type="file" id="upFile"> <!--文件选择input中已选择文件重置(采用form表单的reset重置按钮重置)--> <h3>重置文件选择：</h3> <input class="btn btn-default" type="reset" id="reBtn" value="清空"> <!--提交压缩后的base64文件数据给后台--> <h3>传给后台</h3> <input class="btn btn-default" type="button" id="upTo" value="提交"> <!--后台所要获取的文件base64--> <h3>后台获取base64文件数据：(一个隐藏域)</h3> <input id="imgOne" name="imgOne" type="hidden"> </form>
书写css代码。 html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { padding: 20px 50px 50px 50px; } input { width: 250px; height: 36px; line-height: 36px; } * {box-sizing:border-box;font-size: 16px;vertical-align: middle;} /* 清除现代IE浏览器的输入框和密码框的默认交互按钮 */ ::-ms-clear, ::-ms-reveal{display: none;} input {box-sizing:border-box;} input:active, input:focus{ outline:none; -moz-outline:none;} /* PC chrome文本输入框的边框焦点时候的颜色 */ input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner{ border:none;} /*去掉移动端firefox 按钮获得焦点显示虚线框的样式 */ /* main style */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template {display: none;} a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { margin: .67em 0; font-size: 2em; } mark { color: #000; background: #ff0; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { height: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; } button { overflow: visible; } button, select { text-transform: none; } .btn > .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus, .btn.focus { color: #333; text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; }
书写并添加js代码。 <script src="es/jquery.min.js"></script> <script src="es/tools.js"></script> <script src="es/pictureHandle.js"></script>
书写并添加js代码。 <script src="es/pictureHandle.js"></script> <script> $(function(){var _upFile=document.getElementById("upFile");_upFile.addEventListener("change",function(){if(_upFile.files.length===0){alert("请选择图片");return;} var oFile=_upFile.files[0];if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){alert("照片上传：文件类型必须是JPG、JPEG、PNG");return;} var reader=new FileReader();reader.onload=function(e){var base64Img=e.target.result;$("#preview").attr("src",base64Img);var _ir=ImageResizer({resizeMode:"auto",dataSource:base64Img,dataSourceType:"base64",maxWidth:1200,maxHeight:600,onTmpImgGenerate:function(img){},success:function(resizeImgBase64,canvas){$("#nextview").attr("src",resizeImgBase64);$('#imgOne').val(resizeImgBase64.substr(22));$('#upTo').on('click',function(){$.ajax({url:'server.php',type:'POST',dataType:'json',data:{imgOne:$('#imgOne').val()},success:function(data){alert(data.msg);}});});},debug:true});};reader.readAsDataURL(oFile);},false);}); </script>
代码整体结构。
查看效果。