上传图片预览并在后台处理

<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>

知识点：
HTML5读取input[type=file]中的图片
JavaScript 中的FileReader对象（实现上传图片预览）
HTML5 FileReader读取Blob对象API详解
HTML之Data URL

后台处理方式也就是把base64Img传入后台转换成图片，识别图片信息再返回给页面。
将图片转成二进制并生成Base64编码，可以在网页中通过url查看图片