web开发常见问题及解决方案

作者: 麦兜叮叮当 | 来源:发表于2018-01-13 12:45 被阅读0次

[图片上传中...(20141016114451816.png-5cba10-1516454690386-0)]

js以流的方式传递图片给后台

html

<input type="file" accept="image/*"  onchange="saveimage(this)" >

function saveimage(obj){
                         console.log("进入方法....");
     
            if(window.FileReader){
                var image = obj.files[0];
                var reader = new FileReader();
                 //读取文件过程方法
                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function(e){
                    console.log("FileReader成功拿到");
                    var img = document.getElementById("preview");
                    img.src = e.target.result;
                    uploadImage(this.result);
                }
                reader.readAsArrayBuffer(image);
            } else {
                alert("您的浏览器暂不支持图片上传，请更换浏览器!");
            }
        }
        
        function uploadImage(data){
            console.log(data);
            $.ajax({
                url: "/expert.do?op=saveImage",
                type: "POST",
                data:data, 
                processData:false,
                contentType: false,
                success: function(path){
                    //图片路径
                    console.log("成功, 路径是 = " + path);
                    $('#image_path_id').val(path);
                },
                error: function(){
                    console.log("失败");
                }
            });
        }

servlert

    /**
     * 保存图片
     */
    public ActionForward saveImage(ActionMapping mapping,
            ActionForm form, HttpServletRequest request,
            HttpServletResponse response) {

        
        try {
            InputStream input = request.getInputStream();
            File f = new File(ServerConfig.IMAGE_SAVE_PATH);
            if(!f.exists()){
                f.mkdir();
            }
            String uuid = UUID.randomUUID().toString();
            File image = new File(ServerConfig.IMAGE_SAVE_PATH + File.separator + uuid + ".jpg");
            OutputStream file = new FileOutputStream(image);
        
            byte[] buff = new byte[4096];  
            int len = 0;  
            
            while((len=input.read(buff))!=-1){  
                file.write(buff, 0, len);  
            }  
            input.close();  
            file.close();
            ResponseUtil.write(response, image.getPath());
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        return null;

    }


   /**
     * html显示图片,后台以流的形式获取
     *
     * @return
     */
    public ActionForward image(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {
        String imageName = request.getParameter("image");
        if (imageName == null || imageName.equals("")) {
            return null;
        }
        String imagePath = ServerConfig.IMAGE_SAVE_PATH;
        if (imagePath.length() != 0 && !imagePath.substring(imagePath.length() - 1, imagePath.length()).equals("/")) {
            imagePath = imagePath + File.separator;
        }
        File f = new File(imagePath + "images");
        if (!f.exists()) {
            f.mkdir();
        }
        FileInputStream in;
        try {
            //图片读取路径
            //in=new FileInputStream("E:\\picture\\"+photoName);
            in = new FileInputStream(imagePath + "images" + File.separator + imageName);
            int i = in.available();
            byte[] data = new byte[i];
            in.read(data);
            in.close();
            //写图片
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
            outputStream.write(data);
            outputStream.flush();
            outputStream.close();
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }

html拿到图片,以流的形式从后台传输到页面

<img src="/job.do?op=image&amp;image=a200524d-9cbe-44c9-864b-09b712a523b6.jpg">

结束

html富文本之wangEditor

配置文件以及下载地址

image.png

image.png

下载地址：https://pan.baidu.com/s/1c3UT0Uc

html

  <div id="editor-container" class="edit2" style="width:950px;padding-left:20px;">
        <div id="editor-trigger"><p>请输入内容</p></div>
    </div></td>

<script type="text/javascript">
    
      // 阻止输出log
        // wangEditor.config.printLog = false;

        var editor = new wangEditor('editor-trigger');

        // 上传图片
        editor.config.uploadImgUrl = '/upload';
        editor.config.uploadParams = {
            // token1: 'abcde',
            // token2: '12345'
        };
        editor.config.uploadHeaders = {
            // 'Accept' : 'text/x-json'
        }
        // editor.config.uploadImgFileName = 'myFileName';

        // 隐藏网络图片
        // editor.config.hideLinkImg = true;

        // 插入代码时的默认语言
        // editor.config.codeDefaultLang = 'html'

        // 只粘贴纯文本
        // editor.config.pasteText = true;

        // 跨域上传
        // editor.config.uploadImgUrl = 'http://localhost:8012/upload';

        // 第三方上传
        // editor.config.customUpload = true;

        //普通菜单配置
        editor.config.menus = [
                'bold',
                'underline',
                'italic',
                'strikethrough',
                'eraser',
                'forecolor',
                'bgcolor'
         ];
        

        // onchange 事件
        editor.onchange = function () {
            console.log(this.$txt.html());
        };
        editor.create();
</script>

获取富文本内容

var text = editor.$txt.html();

效果图

738886C7-B2DC-4BD0-BE48-B1F29C5136A5.png

官方使用手册

https://www.kancloud.cn/wangfupeng/wangeditor2/113969

结束

jQuery EasyUI简单使用

EasyUI下载
EasyUI官方下载地址：http://www.jeasyui.com/download/index.php download.png

下载完成之后，得到

image.png

download-1.png

压缩包，解压后，得到一个【jquery-easyui-1.4.1】文件夹，里面有如下图所示的文件：

引入必要的js和css样式文件

 <!-- 引入JQuery -->
 2   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.min.js"></script>
 3   <!-- 引入EasyUI -->
 4   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
 5   <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
 6   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
 7   <!-- 引入EasyUI的样式文件-->
 8   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
 9   <!-- 引入EasyUI的图标样式文件-->
10   <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>

在jsp文件中引用了这些文件之后，就可以使用EasyUI了。

easyUI 验证控件应用、自定义、扩展验证手机号码或电话话码格式
效果图

20141016114451816.png

20141016114821574.png

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  
<title>Insert title here</title>  
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css"/>      
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4/themes/icon.css"/>      
    <script type="text/javascript" src="jquery-easyui-1.4/jquery.min.js"></script>      
    <script type="text/javascript" src="jquery-easyui-1.4/jquery.easyui.min.js"></script>      
    <script type="text/javascript" src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>    
</head>  
<body>  
 <h2>Custom ValidateBox Tooltip</h2>  
    <p>This sample shows how to display another tooltip message on a valid textbox.</p>  
    <div style="margin:20px 0;"></div>  
    <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">  
        <table cellpadding="5">  
            <tr>  
                <td>User Name:</td>  
                <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'"></td>  
            </tr>  
            <tr>  
                <td>Email:</td>  
                <td><input class="easyui-validatebox textbox" data-options="prompt:'Enter a valid email.',required:true,validType:'email'"></td>  
            </tr>  
            <tr>  
                <td>Birthday:</td>  
                <td><input class="easyui-datebox"></td>  
            </tr>  
            <tr>  
                <td>URL:</td>  
                <td><input class="easyui-validatebox textbox" data-options="prompt:'Enter your URL.',required:true,validType:'url'"></td>  
            </tr>  
            <tr>  
                <td>Phone:</td>  
                <td><input class="easyui-validatebox textbox" data-options="prompt:'Enter your phone number.',required:true"></td>  
            </tr>  
              
             <tr>  
                <td>extneds 联系电话 test:</td>  
                <td><input class="easyui-validatebox" data-options="validType:'phoneRex'"></td>  
            </tr>  
        </table>  
    </div>  
    <style scoped="scoped">  
        .textbox{  
            height:20px;  
            margin:0;  
            padding:0 2px;  
            box-sizing:content-box;  
        }  
    </style>  
    <script>  
      
      
     //自定义验证  
    $.extend($.fn.validatebox.defaults.rules, {  
    phoneRex: {  
        validator: function(value){  
        var rex=/^1[3-8]+\d{9}$/;  
        //var rex=/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;  
        //区号：前面一个0，后面跟2-3位数字 ： 0\d{2,3}  
        //电话号码：7-8位数字： \d{7,8  
        //分机号：一般都是3位数字： \d{3,}  
         //这样连接起来就是验证电话的正则表达式了：/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/          
        var rex2=/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;  
        if(rex.test(value)||rex2.test(value))  
        {  
          // alert('t'+value);  
          return true;  
        }else  
        {  
         //alert('false '+value);  
           return false;  
        }  
            
        },  
        message: '请输入正确电话或手机格式'  
    }  
});  
  
        $(function(){  
            $('input.easyui-validatebox').validatebox({  
                tipOptions: {    // the options to create tooltip  
                    showEvent: 'mouseenter',  
                    hideEvent: 'mouseleave',  
                    showDelay: 0,  
                    hideDelay: 0,  
                    zIndex: '',  
                    onShow: function(){  
                        if (!$(this).hasClass('validatebox-invalid')){  
                            if ($(this).tooltip('options').prompt){  
                                $(this).tooltip('update', $(this).tooltip('options').prompt);  
                            } else {  
                                $(this).tooltip('tip').hide();  
                            }  
                        } else {  
                            $(this).tooltip('tip').css({  
                                color: '#000',  
                                borderColor: '#CC9933',  
                                backgroundColor: '#FFFFCC'  
                            });  
                        }  
                    },  
                    onHide: function(){  
                        if (!$(this).tooltip('options').prompt){  
                            $(this).tooltip('destroy');  
                        }  
                    }  
                }  
            }).tooltip({  
                position: 'right',  
                content: function(){  
                    var opts = $(this).validatebox('options');  
                    return opts.prompt;  
                },  
                onShow: function(){  
                    $(this).tooltip('tip').css({  
                        color: '#000',  
                        borderColor: '#CC9933',  
                        backgroundColor: '#FFFFCC'  
                    });  
                }  
            });  
        });  
    </script>  
</body>  
   
</body>  
</html>

网页验证码生成

后台生成验证码

@Controller
@RequestMapping("/code")
public class SecCodeController {

    @RequestMapping
    public void generate(HttpServletResponse response){
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        String code = drawImg(output);
        
        Subject currentUser = SecurityUtils.getSubject();  
        Session session = currentUser.getSession();
        session.setAttribute(Const.SESSION_SECURITY_CODE, code);
        
        try {
            ServletOutputStream out = response.getOutputStream();
            output.writeTo(out);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    private String drawImg(ByteArrayOutputStream output){
        String code = "";
        for(int i=0; i<4; i++){
            code += randomChar();
        }
        int width = 70;
        int height = 25;
        BufferedImage bi = new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR);
        Font font = new Font("Times New Roman",Font.PLAIN,20);
        Graphics2D g = bi.createGraphics();
        g.setFont(font);
        Color color = new Color(66,2,82);
        g.setColor(color);
        g.setBackground(new Color(226,226,240));
        g.clearRect(0, 0, width, height);
        FontRenderContext context = g.getFontRenderContext();
        Rectangle2D bounds = font.getStringBounds(code, context);
        double x = (width - bounds.getWidth()) / 2;
        double y = (height - bounds.getHeight()) / 2;
        double ascent = bounds.getY();
        double baseY = y - ascent;
        g.drawString(code, (int)x, (int)baseY);
        g.dispose();
        try {
            ImageIO.write(bi, "jpg", output);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return code;
    }
    
    private char randomChar(){
        Random r = new Random();
        String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789";
        return s.charAt(r.nextInt(s.length()));
    }
}

html加载验证码

<img style="height:22px;" id="codeImg" alt="点击更换"
                                title="点击更换" src="" />

        $(document).ready(function() {
            changeCode();
            $("#codeImg").bind("click", changeCode);
        });

        function changeCode() {
            $("#codeImg").attr("src", "code.do");
        }

就这么简单,验证码就出来了。
结束

web开发常见问题及解决方案

js以流的方式传递图片给后台

html富文本之wangEditor

jQuery EasyUI简单使用

网页验证码生成

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读