上传图片附件验证和预览

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vote_SubjectItemAdd.aspx.cs" Inherits="oa_vote_Vote_SubjectItemAdd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>添加投票主题</title>
    <link href="../../common/css/common.css" rel="stylesheet" type="text/css" />
    <script src="../../common/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../common/js/common.js" type="text/javascript"></script>
    <script src="../../common/DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="../../common/kindeditor/kindeditor-min.js" type="text/javascript"></script>
    <script src="../../common/kindeditor/lang/zh_CN.js" type="text/javascript"></script>
    <style type="text/css"> #upDiv td{border:none;}</style>

    <script type="text/javascript">
        $(document).ready(function () {
            KindEditor.ready(function (K) {
                editor = K.create('#txtMainContent', {
                    cssPath: '../../common/kindeditor/plugins/code/prettify.css',
                    uploadJson: '../../common/kindeditor/asp.net/upload_json.ashx',
                    fileManagerJson: '../../common/kindeditor/asp.net/file_manager_json.ashx',
                    allowFileManager: true
                });
            });

        })


        function clearNoNum(obj) {
            obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
            obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是.
            obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的.
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        }
        function back() {
            location.href = "Vote_SubjectList.aspx";
        }


        function setImageView(obj) {
            var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型  
            if (obj.value == '') {
                alert("选择要上传的图片!");
                return false;
            }
            document.getElementById("hfImgTrue").value = "false";
            var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用   
            ////布尔型变量  
            var isExists = false;
            //循环判断图片的格式是否正确
            for (var i in array) {
                if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                    document.getElementById("hfImgTrue").value = "true";
                    isExists = true;
                }
            }
            if (isExists == false) {
                alert("上传图片类型不正确!");
                return false;
            }
            var file = obj.files[0];
            var blob = (typeof file === 'string') ? file : URL.createObjectURL(file);
            var img = document.getElementById("preview");
            img.src = blob;
        }
        //确认保存信息
        function CheckResult() {



                var idFile = document.getElementById("txtFileUpload").value;
                //判断是否选择图片  
                if (idFile == null || idFile == "") {
                    alert('请添加图片!');
                    return false;
                }

            var isImageTrue = document.getElementById("hfImgTrue").value;
            if (isImageTrue == "false") {
                alert('上传图片格式不正确!');
                return false;
            }
            return true;


        }
    </script>
</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data">
    <div class="title" style ="overflow:hidden;">添加投票主题</div> 


        <table class="commontab" border="0" cellpadding="0" cellspacing="0" style="width: 100%;
            overflow: auto;">
            <tr>
                <td style="text-align: right; width: 151px; height: 30px;">
                    投票主题：
                    
                </td>
                <td style="text-align: left; padding-left: 1px;">
                    
                    <input id="txtname" disabled="disabled"  runat="server" class="txt" style="width: 250px;" />
                    
                </td>
            </tr>
            <tr>
                <td style="text-align: right; width: 151px; height: 30px;">
                    顺序：
                </td>
                <td style="text-align: left; padding-left: 1px;">
                    <input id="txtsort"  onkeyup="clearNoNum(this)"  runat="server" class="txt" style="width: 250px;" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right; width: 151px; height: 30px;">
                    上传图片：
                </td>
                <td style="text-align: left; padding-left: 1px;">
                    <asp:FileUpload ID="txtFileUpload" Width="200" runat="server" onchange="setImageView(this)" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right; width: 151px; height: 30px;">
                    
                </td>
                <td style="text-align: left; width: 500px; padding-left: 1px;">
                        <div id="localImag" style="width: 100px; height: 100px;">
                            <img id="preview" alt="预览图片" src="../images/other_1.PNG" width="100" height="100"
                                runat="server" />
                        </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: right; width: 151px; height: 30px;">
                    投票简介：
                </td>
                <td style="text-align: left; padding-left: 1px;">
                    <textarea id="txtMainContent" runat="server" cols="100" rows="8" style="width:100%;min-width:550px;height:400px;visibility:hidden;"></textarea>
                </td>
            </tr>


            <tr>
                <td class="bl" style="display:none;">附件:</td>
                <td class="br" style="padding:1px;display:none;">
                    <table id="upDiv" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="padding-left:2px;"><asp:Literal ID="litUploadInfo" runat="server" EnableViewState="false"></asp:Literal></td>
                        </tr>
                        <tr>
                            <td><input name="upfile" class="txt" style="width:210px" type="file" /></td>
                            <td>&nbsp;<input name="next" onclick="addFile()" class="btn" style="height:20px;line-height:17px;width:70px;" type="button" value="增加附件" /></td>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>


        <div class="brline"></div>
        <table class="commontab" style="table-layout: fixed; width: 100%;">
            <tr>
                <td class="br" style="height: 50px; padding-left: 200px;">
                    <%--<a class="l-btn" href="javascript:void(0);" onclick="back();"><span class="l-btn-left">
                        <img src="/public/Themes/Images/arrow_left.png" alt="" />返 回</span></a>--%>
                        <asp:Panel id="Panel1" runat="server">
                    
                        <asp:Button ID="Button1" runat="server" Text="保 存" class="btn"
                        style="width:60px;height:25px;" onclick="baocunqj_Click" />
                            &nbsp;&nbsp;&nbsp;&nbsp;<input id="Button3" class="btn" type="button" style="width:60px;height:25px;" onclick="back();" value="返 回" /></asp:Panel> 
                </td>
            </tr>
        </table>
            <asp:HiddenField ID="hfImageURL" runat="server" />
    <asp:HiddenField ID="hfImgTrue" runat="server" />
    </form>



</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vote_SubjectItemAdd.aspx.cs" Inherits="oa_vote_Vote_SubjectItemAdd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>添加投票主题</title> <link href="../../common/css/common.css" rel="stylesheet" type="text/css" /> <script src="../../common/js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../../common/js/common.js" type="text/javascript"></script> <script src="../../common/DatePicker/WdatePicker.js" type="text/javascript"></script> <script src="../../common/kindeditor/kindeditor-min.js" type="text/javascript"></script> <script src="../../common/kindeditor/lang/zh_CN.js" type="text/javascript"></script> <style type="text/css"> #upDiv td{border:none;}</style>
<script type="text/javascript"> $(document).ready(function () { KindEditor.ready(function (K) { editor = K.create('#txtMainContent', { cssPath: '../../common/kindeditor/plugins/code/prettify.css', uploadJson: '../../common/kindeditor/asp.net/upload_json.ashx', fileManagerJson: '../../common/kindeditor/asp.net/file_manager_json.ashx', allowFileManager: true }); });
})

function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是. obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的. obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); } function back() { location.href = "Vote_SubjectList.aspx"; }

function setImageView(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型    if (obj.value == '') { alert("选择要上传的图片!"); return false; } document.getElementById("hfImgTrue").value = "false"; var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用     ////布尔型变量    var isExists = false; //循环判断图片的格式是否正确 for (var i in array) { if (fileContentType.toLowerCase() == array[i].toLowerCase()) { document.getElementById("hfImgTrue").value = "true"; isExists = true; } } if (isExists == false) { alert("上传图片类型不正确!"); return false; } var file = obj.files[0]; var blob = (typeof file === 'string') ? file : URL.createObjectURL(file); var img = document.getElementById("preview"); img.src = blob; } //确认保存信息 function CheckResult() {

var idFile = document.getElementById("txtFileUpload").value; //判断是否选择图片    if (idFile == null || idFile == "") { alert('请添加图片!'); return false; }
var isImageTrue = document.getElementById("hfImgTrue").value; if (isImageTrue == "false") { alert('上传图片格式不正确!'); return false; } return true;

} </script></head><body> <form id="form1" runat="server" enctype="multipart/form-data"> <div class="title" style ="overflow:hidden;">添加投票主题</div>

<table class="commontab" border="0" cellpadding="0" cellspacing="0" style="width: 100%; overflow: auto;"> <tr> <td style="text-align: right; width: 151px; height: 30px;"> 投票主题：     </td> <td style="text-align: left; padding-left: 1px;">     <input id="txtname" disabled="disabled" runat="server" class="txt" style="width: 250px;" />     </td> </tr> <tr> <td style="text-align: right; width: 151px; height: 30px;"> 顺序： </td> <td style="text-align: left; padding-left: 1px;"> <input id="txtsort" onkeyup="clearNoNum(this)" runat="server" class="txt" style="width: 250px;" /> </td> </tr> <tr> <td style="text-align: right; width: 151px; height: 30px;"> 上传图片： </td> <td style="text-align: left; padding-left: 1px;"> <asp:FileUpload ID="txtFileUpload" Width="200" runat="server" onchange="setImageView(this)" /> </td> </tr> <tr> <td style="text-align: right; width: 151px; height: 30px;">     </td> <td style="text-align: left; width: 500px; padding-left: 1px;"> <div id="localImag" style="width: 100px; height: 100px;"> <img id="preview" alt="预览图片" src="../images/other_1.PNG" width="100" height="100" runat="server" /> </div> </td> </tr> <tr> <td style="text-align: right; width: 151px; height: 30px;"> 投票简介： </td> <td style="text-align: left; padding-left: 1px;"> <textarea id="txtMainContent" runat="server" cols="100" rows="8" style="width:100%;min-width:550px;height:400px;visibility:hidden;"></textarea> </td> </tr>

<tr> <td class="bl" style="display:none;">附件:</td> <td class="br" style="padding:1px;display:none;"> <table id="upDiv" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding-left:2px;"><asp:Literal ID="litUploadInfo" runat="server" EnableViewState="false"></asp:Literal></td> </tr> <tr> <td><input name="upfile" class="txt" style="width:210px" type="file" /></td> <td> <input name="next" onclick="addFile()" class="btn" style="height:20px;line-height:17px;width:70px;" type="button" value="增加附件" /></td> </tr> </table> </td> </tr>
</table>

<div class="brline"></div> <table class="commontab" style="table-layout: fixed; width: 100%;"> <tr> <td class="br" style="height: 50px; padding-left: 200px;"> <%--<a class="l-btn" href="javascript:void(0);" onclick="back();"><span class="l-btn-left"> <img src="/public/Themes/Images/arrow_left.png" alt="" />返回</span></a>--%> <asp:Panel id="Panel1" runat="server">     <asp:Button ID="Button1" runat="server" Text="保存" class="btn" style="width:60px;height:25px;" onclick="baocunqj_Click" />     <input id="Button3" class="btn" type="button" style="width:60px;height:25px;" onclick="back();" value="返回" /></asp:Panel>   </td> </tr> </table> <asp:HiddenField ID="hfImageURL" runat="server" /> <asp:HiddenField ID="hfImgTrue" runat="server" /> </form>

</body></html>

来源：https://www.cnblogs.com/Zpyboke/p/5226809.html

标签

传照片

common

padding

text-align

input

table

replace