我的风格，先给大家展示下效果图，具体效果图如下所示，如果大家感觉还不错很满意请参考实现代码。
HTML的代码：
<form runat="server" method="post"> <div> <table> <tr> <td>书画名称：<input validType:'paintingName' type="text" data-options="required:true"/></td> </tr> <tr> <td>书画类别：<input value="国画" type="radio" checked="checked" data-options="required:true" />国画 <input type="radio" data-options="required:true" />书法</td> </tr> <tr> <td>书画作者：<asp:DropDownList runat="server"></asp:DropDownList> </td> </tr> <tr> <td>书画价格：<input type="text" data-options="required:true"/>元</td> </tr> <tr> <td>高 度：<input type="text" data-options="required:true"/>cm</td> </tr> <tr> <td> 宽 度：<input type="text" data-options="required:true"/>cm </td> </tr> <tr> <td> 选择图片:<asp:FileUpload runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"> </td> </tr> <tr> <td> 预 览: <div> <img alt="预览图片" src=""/> </div> </td> </tr> </table> <input type="hidden" /> <div> <a href="javascript:void(0)">确定</a> <a href="javascript:void(0)">取消</a> </div> <%--显示大图标的区域--%> <div> <img src="" alt="大图" /> </div> </div> </form>
JS代码：
//显示图片 function over(imgid, obj, imgbig) { //大图显示的最大尺寸 4比3的大小 400 300 maxwidth = 400; maxheight = 300; //显示 obj.style.display = ""; imgbig.src = imgid.src; //1、宽和高都超过了，看谁超过的多，谁超的多就将谁设置为最大值，其余策略按照2、3 //2、如果宽超过了并且高没有超，设置宽为最大值 //3、如果宽没超过并且高超过了，设置高为最大值 if (img.width > maxwidth && img.height > maxheight) { pare = (img.width - maxwidth) - (img.height - maxheight); if (pare >= 0) img.width = maxwidth; else img.height = maxheight; } else if (img.width > maxwidth && img.height <= maxheight) { img.width = maxwidth; } else if (img.width <= maxwidth && img.height > maxheight) { img.height = maxheight; } } //隐藏图片 function out() { document.getElementById('divImage').style.display = "none"; } //保存信息 function submitForm() { $.messager.confirm('提示', '你确定要添加此记录吗？', function (r) { if (r) { //先上传图片后，再提交 upLoadFile(); var test = document.getElementById("test").value = "add"; var paintingName = document.getElementById("paintingName").value; var artistID = document.getElementById("ddlist").value; var type = $(":checkbox[name='type']").attr("checked") == true ? "书法" : "国画"; var price = document.getElementById("price").value; var height = document.getElementById("height").value; var width = document.getElementById("width").value; var idFile = document.getElementById("idFile").value; //先判断是否上传图片之后在提交 $('#ff').form('submit', { url: "Painting.ashx?paintingName=" + paintingName + "&artistID=" + artistID + "&type=" + type + "&price=" + price + "&height=" + height + "&width=" + width + "&idFile=" + idFile + "&addID=" + addID + "&test=" + test, dataType: "json", onSubmit: function () { return $(this).form('validate'); }, success: function (result) { if (result == "T") { //清空文本框 document.getElementById("paintingName").value = ""; document.getElementById("price").value = ""; document.getElementById("height").value = ""; document.getElementById("width").value = ""; document.getElementById("idFile").value = ""; document.getElementById("preview").value = ""; $.messager.alert('提示', '恭喜您，信息添加成功！', 'info'); } else { $.messager.alert('提示', '保存失败，请您核对！', 'info'); } } }); } }); } //上传图片 function upLoadFile() { var idFile = document.getElementById("idFile").value; //判断是否选择图片 if (idFile == null || idFile == "") { $.messager.alert('提示','请添加图片!'); document.getElementById("idFile").focus(); document.getElementById("idFile").select(); return; } var options = { type: "POST", url: 'Files.ashx', //success: showResponse }; // 将options传给ajaxForm $('#ff').ajaxSubmit(options); } //function showResponse() { // alert("上传成功!"); //} function clearForm(){ //清空文本框 document.getElementById("paintingName").value = ""; document.getElementById("price").value = ""; document.getElementById("height").value = ""; document.getElementById("width").value = ""; document.getElementById("idFile").value = ""; }
后台一般处理程序的代码：
上传图片的一般处理程序：