上传图片附件验证和预览
<%@ 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>
<%@ 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>