文章内容
DTcms源码各个版本并没有提供前端控件上传功能，只有后端有这个功能，那么我们在制作网站的时候，尤其是制作招聘功能的时候，有的时候需要有客户提供上传附件的功能，那么我们应该怎么做呢，代码如下：
初始化上传控件
<script type="text/javascript" src="{config.webpath}scripts/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="{config.webpath}scripts/lhgdialog/lhgdialog.js?skin=idialog"></script>
<script type="text/javascript" src="{config.webpath}scripts/swfupload/swfupload.js"></script>
<script type="text/javascript" src="{config.webpath}scripts/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="{config.webpath}scripts/swfupload/swfupload.handlers.js"></script>
<script type="text/javascript" src="<%templateskin%>/js/common.js"></script>
<script type="text/javascript">
$(function () {
//初始化上传控件
$(".upload-img").each(function () {
$(this).InitSWFUpload({
sendurl: "{config.webpath}tools/upload_ajax.ashx",
flashurl: "{config.webpath}scripts/swfupload/swfupload.swf",
filetypes: "*.jpg;*.jpge;*.png;*.gif;*.rar;*.zip;*.doc;*.xls"
});
});
});
</script>主要html代码
<link rel="stylesheet" href="{config.webpath}css/validate.css" />
<script type="text/javascript" src="{config.webpath}scripts/jquery/jquery.form.min.js"></script>
<script type="text/javascript" src="{config.webpath}scripts/jquery/Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="<%templateskin%>/js/register_validate.js"></script>
<form id="regform" name="regform" url="{config.webpath}tools/submit_ajax.ashx?action=zhaopin">
<div class="nyrq_2_2">
<ul>
<li>
<div class="uptext">
<p>
留言人：</p>
</div>
<div class="inputt">
<input id="txtUserName" name="txtUserName" type="text" class="input">
</div>
</li>
<li>
<div class="uptext">
<p>
您的性别：</p>
</div>
<div class="uptext">
<select id="txtSex" size="1" class="input" title="请选择性别" name="txtSex">
<option value="">请选择性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</li>
<li>
<div class="uptext">
<p>
通讯地址：</p>
</div>
<div class="inputt">
<input id="txtAdress" name="txtAdress" type="text" class="input">
</div>
</li>
<li>
<div class="uptext">
<p>
联系电话：</p>
</div>
<div class="inputt">
<input id="txtTel" name="txtTel" type="text" class="input">
</div>
</li>
<li style="height: 120px;">
<div class="uptext">
<p>
个人介绍：</p>
</div>
<div class="inputta">
<textarea id="txtContent" name="txtContent" class="inputa"></textarea>
</div>
</li>
<li>
<dl>
<dt class="uptext">
<p>
上传附件：</p>
</dt>
<dd class="inputtt">
<input id="txtImgUrl" name="txtImgUrl" type="text" class="input normal upload-path"><div
class="upload-box upload-img">
浏览</div>
</dd>
</dl>
</li>
<li>
<div class="tijiao">
<input id="btnSubmit" name="btnSubmit" type="submit" class="submit" value="提交信息">
<input name="reset" type="reset" value="重置" class="submit">
</div>
</li>
</ul>
</div>
</form>register_validate.js代码
//=====================初始化代码======================
$(function () {
//显示验证码
$("#txtCode").bind("focus", function () {
$("#verifyCode").show();
});
//同意条款
$("#chkAgree").click(function () {
if ($(this).is(":checked")) {
$("#btnSubmit").prop("disabled", false);
} else {
$("#btnSubmit").prop("disabled", true);
}
});
//发送短信
$("#btnSendcode").click(function(){
//检查是否输入手机号码
if($("#txtMobile").val()==""){
$.dialog.alert("对不起，请先输入手机号码！");
return false;
}
//设置按钮状态
$("#txtCode").prop("disabled", false);
$("#btnSendcode").prop("disabled", true);
$.ajax({
type: "POST",
url: $("#btnSendcode").attr("url"),
dataType: "json",
data: {
"mobile" : $("#txtMobile").val()
},
timeout: 20000,
success: function(data, textStatus) {
if (data.status == 1){
$.dialog.tips(data.msg, 2, "32X32/succ.png", function(){ });
} else {
$("#btnSendcode").prop("disabled", false);
$.dialog.alert(data.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#btnSendcode").prop("disabled", false);
$.dialog.alert("状态：" + textStatus + "；出错提示：" + errorThrown);
}
});
});
//初始化验证表单
$("#regform").Validform({
tiptype:3,
callback:function(form){
//AJAX提交表单
$(form).ajaxSubmit({
beforeSubmit: showRequest,
success: showResponse,
error: showError,
url: $("#regform").attr("url"),
type: "post",
dataType: "json",
timeout: 60000
});
return false;
}
});
//表单提交前
function showRequest(formData, jqForm, options) {
$("#btnSubmit").val("正在提交...")
$("#btnSubmit").prop("disabled", true);
$("#chkAgree").prop("disabled", true);
}
//表单提交后
function showResponse(data, textStatus) {
if (data.status == 1) { //成功
location.href = data.url;
} else { //失败
$.dialog.alert(data.msg);
$("#btnSubmit").val("提交");
$("#btnSubmit").prop("disabled", false);
$("#chkAgree").prop("disabled", false);
}
}
//表单提交出错
function showError(XMLHttpRequest, textStatus, errorThrown) {
$.dialog.alert("状态：" + textStatus + "；出错提示：" + errorThrown);
$("#btnSubmit").val("再次提交");
$("#btnSubmit").prop("disabled", false);
$("#chkAgree").prop("disabled", false);
}
});{config.webpath}tools/submit_ajax.ashx?action=zhaopin
action=zhaopin方法可以模仿后端上传附件功能方法
