上篇博客，我们简单的介绍了js实现上传图片之前判断图片格式，同时实现预览。这篇博客，给大家介绍如何上传图片，上传成功之后，再提交表单。下面我们进入正题：
像前面的博客一样，先给大家看一下界面，这样更简单，便于理解。
界面：
HTML的代码：
<form id="ff" runat="server" method="post"><div id="content" style="margin-left:50px;"><table style="width:300px;" id="uniform"><tr><td>书画名称：<input id="paintingName" class="easyui-validatebox" validType:'paintingName' type="text" name="paintingName" data-options="required:true"/></td></tr><tr><td>书画类别：<input id="radPaint" value="国画" class="easyui-validatebox" name="type" type="radio" checked="checked" data-options="required:true" />国画<input id="rad" name="type" class="easyui-validatebox" type="radio" data-options="required:true" />书法</td></tr><tr><td>书画作者：<asp:DropDownList ID="ddlist" runat="server" Width="155px"></asp:DropDownList></td></tr><tr><td>书画价格：<input id="price" class="easyui-numberbox" type="text" name="price" data-options="required:true"/>元</td></tr><tr><td>高 度：<input id="height" class="easyui-numberbox" type="text" name="height" data-options="required:true"/>cm</td></tr><tr><td>宽 度：<input id="width" class="easyui-numberbox" type="text" name="width" data-options="required:true"/>cm</td></tr><tr><td>选择图片:<asp:FileUpload ID="idFile" Width="150px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"></td></tr><tr><td>预 览:<div id="localImag" style="width: 300px; height: 200px;"><img id="preview" alt="预览图片" onclick="over(preview,divImage,imgbig);" src="../../Paint/img/default.jpg" width="300" height="200"/></div></td></tr></table><input type="hidden" id="test" name="test" /><div style="width:300px; text-align:center;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">确定</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">取消</a></div><%–显示大图标的区域–%><div id="divImage" style="display: none;left:365px;top:40px;position: absolute"><img id="imgbig" onclick="out();" 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 = "";}
后台一般处理程序的代码：
世界没有永久的冬天;不要讨厌麻烦，
