<a class="a-upload"><input type="file" name="fpic1" onchange="startPreview('fpic1','showpic1');">上传图片</a> <img id="showpic1" src="${pic1_url}" style="" alt="暂无照片" /> <script> function startPreview(picname,showid){ var _upFile=$("input[name='"+picname+"']")[0]; 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; //base64Img传入后台，后台处理图像。 [此处代码省略。。。] //压缩前预览 $("#"+showid).attr("src",base64Img); //--执行resize。 [此处代码省略。。。] }; reader.readAsDataURL(oFile); } </script>
1234567891011121314151617181920212223242526272829知识点：
HTML5读取input[type=file]中的图片
JavaScript 中的FileReader对象（实现上传图片预览）
HTML5 FileReader读取Blob对象API详解
HTML之Data URL
后台处理方式也就是把base64Img传入后台转换成图片，识别图片信息再返回给页面。
将图片转成二进制并生成Base64编码，可以在网页中通过url查看图片
