常用的表单操作

常用的表单操作

1、在制作图片上传时，前端页面经常会需要判断图片的类型，图片的大小什么的，如果不做这些判断交给服务器处理，无疑会增加服务器的压力。 　　

　　　　　　　　　　<tr>
                    <th>本地图片：</th>
                    <td>
                        <input value="" name="specImg" type="file" id="specImg_file" class="none"/>
                        <button class="btn" id="selectSpecImg" type="button"><span class="add">选择规格图图</span></button>
                    </td>
                </tr>
                <tr>
                    <th>本地图片：</th>
                    <td>
                        <input value="确定" type="submit" />
                    </td>
                </tr>

js处理

　　　　$("#selectSpecImg").on("click",function(){
                $("#specImg_file").click().off("change").on("change",function(){
                    var file_info = $(this)[0].files[0];
                    var type = ["image/gif","image/jpeg","image/png"];　　　　//允许的mime文件类型
                    
                    if($.inArray(file_info.type,type) < 0){        //【文件类型判断】如果不包含，则会返回-1
                        、、、、、//此处省略代码若干
                   }
                    
                    if(file_info.size / 1024 > 100){　　　　　　　　　//【文件大小判断】
                        、、、、//此处省略代码若干
　　　　　　　　　　　　　　}
                });
            });

2、阻止表单的默认行为：

　　　　　　//当提交表单时，会触发sumit()事件
            $("#uploadImg").submit(function(e){
                //使用preventDefault()函数来阻止对表单的提交
                e.preventDefault();
                var file_info = $("#specImg_file")[0].files[0];
                var type = ["image/gif","image/jpeg","image/png"];// 
                
                if($.inArray(file_info.type,type) < 0){        //如果不包含，则会返回-1
                    art.dialog({
                        title:"温馨提示",
                        icon: "error",
                        opacity: 0.5,    // 透明度
                        content: "不符合的文件类型，请选择图片...",
                        lock:true,
                        okVal:"确定",
                    });
                    return false;
                }else if(file_info.size / 1024 > 100){
                    art.dialog({
                        title:"温馨提示",
                        icon: "error",
                        opacity: 0.5,    // 透明度
                        content: "图片文件过大，请重新选择图片...",
                        lock:true,
                        ok:"确定",
                    });
                
                    return false;
                }else{
                    return true;
                }
            });