我要评论基于asp.net +easyui框架上传图片，实现图片上传，提交表单：
<body>
<link href="../../easyui/themes/easyui.css" rel="stylesheet" type="text/css" />
<script charset="utf-8" src="../../easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script charset="utf-8" src="../../easyui/easyui-lang-zh_cn.js" type="text/javascript"></script>
<script charset="utf-8" src="../../js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
//检查图片的格式是否正确,同时实现预览
function setimagepreview(obj, localimagid, imgobjpreview) {
var array = new array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
if (obj.value == '') {
$.messager.alert("让选择要上传的图片!");
return false;
}
else {
var filecontenttype = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
////布尔型变量
var isexists = false;
//循环判断图片的格式是否正确
for (var i in array) {
if (filecontenttype.tolowercase() == array[i].tolowercase()) {
//图片格式正确之后，根据浏览器的不同设置图片的大小
if (obj.files && obj.files[0]) {
//火狐下，直接设img属性
imgobjpreview.style.display = 'block';
imgobjpreview.style.width = '200px';
imgobjpreview.style.height = '150px';
//火狐7以上版本不能用上面的getasdataurl()方式获取，需要一下方式
imgobjpreview.src = window.url.createobjecturl(obj.files[0]);
}
else {
//ie下，使用滤镜
obj.select();
var imgsrc = document.selection.createrange().text;
//必须设置初始大小
localimagid.style.width = "200px";
localimagid.style.height = "150px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localimagid.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale)";
localimagid.filters.item("dximagetransform.microsoft.alphaimageloader").src = imgsrc;
}
catch (e) {
$.messager.alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgobjpreview.style.display = 'none';
document.selection.empty();
}
isexists = true;
return true;
}
}
if (isexists == false) {
$.messager.alert("上传图片类型不正确!");
return false;
}
return false;
}
}
//显示图片
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 submitform() {
//先上传图片后，再提交
uploadfile();
var test = document.getelementbyid("test").value = "add";
var tbname = document.getelementbyid("tbname").value;
var idfile = document.getelementbyid("idfile").value;
//先判断是否上传图片之后在提交
$('#ff').form('submit', {
url: "../../handler/add.ashx?tbname=" + tbname + "&idfile=" + idfile + "&test=" + test,
datatype: "json",
onsubmit: function () {
if ($(this).form('validate'))
return true;
else {
return false;
}
},
success: function (data) {
var datajson = $.parsejson(data);
if (datajson.success) {
$("#add_address").dialog('destroy'); //销毁dialog对象
$.messager.alert("提示", datajson.msg)
$("#datelist").datagrid("reload").datagrid('clearselections').datagrid('clearchecked');
} else {
$("#add_address").dialog('destroy'); //销毁dialog对象
$.messager.alert("提示", datajson.msg)
}
}
});
}
//上传图片
function uploadfile() {
var idfile = document.getelementbyid("idfile").value;
//判断是否选择图片
var options = {
type: "post",
url: '../../handler/inputimg.ashx'
//success: showresponse
};
// 将options传给ajaxform
$('#ff').ajaxsubmit(options);
}
</script>
<form id="ff" runat="server" method="post">
<table style="width: 422px; margin-top: 20px; height: 91px;">
<tr>
<th style="text-align: right; width: 100px;" class="style1">
链接名称：
</th>
<td style="text-align: left" class="style1">
<asp:textbox id="tbid" runat="server" style="display: none"></asp:textbox>
<asp:textbox id="tbname" runat="server" width="274px" height="20px" class="easyui-validatebox"
data-options="required:true"></asp:textbox>
</td>
</tr>
<tr>
<th style="text-align: right; " class="style2">
链接logo：
</th>
<td class="style3">
<div style="width: 307px; height: 22px;">
选择图片:<input id="idfile" style="width: 224px" runat="server" name="idfile" onchange="javascript:setimagepreview(this,localimag,preview);"
type="file" />
</div>
<%--预 览:
<div id="localimag">
<img id="preview" onclick="over(preview,divimage,imgbig);" src="" style="width: 200px;
height: 150px;" />
</div>--%>
</td>
</tr>
</table>
<div style="width: 325px; text-align: center; margin-top: 20px; margin-left: 50px">
<input type="hidden" id="test" name="test" />
<a id="btn_sc" href="javascript:void(0)" class="easyui-linkbutton" onclick="submitform()">
上传</a>
<a href="friendly.aspx" class="easyui-linkbutton">取消</a>
</div>
</form>
</body>
提交表单的一般处理程序：
bll.j_friendly frend = null;
model.j_friendly fr = null;
public void processrequest(httpcontext context)
{
context.response.contenttype = "text/plain";
string command = context.request["test"].tostring();//前台传的标示值
if (command == "add")
{
addfrend(context);
}
if (command == "update")
{
updatefrend(context);
}
}
public void addfrend(httpcontext context)
{
frend = new bll.j_friendly();
fr = new model.j_friendly();
string tbname = context.request.querystring["tbname"].trim();
if (frend.exists("f_name='" + tbname + "'"))
{
context.response.write("{\"msg\":\"添加失败，链接名称与已有的链接名称重复！\",\"success\":false}");
return;
}
else
{
try
{
fr.f_name = context.request.querystring["tbname"].trim();
}
catch
{
context.response.write("{\"msg\":\"添加失败，请核对信息！\",\"success\":false}");
return;
}
try
{
string img = context.request.querystring["idfile"].trim();
if (img == "")
{
context.response.write("{\"msg\":\"添加失败，请核对图片信息！\",\"success\":false}");
return;
}
else
{
string str = context.request.querystring["idfile"].trim();
string str1 = str.remove(0, str.lastindexof("\\") + 1);
fr.f_img = "../../upload/images/" + str1;
}
}
catch
{
context.response.write("{\"msg\":\"添加失败，请核对信息！\",\"success\":false}");
return;
}
}
if (frend.add(fr) > 0)
{
context.response.write("{\"msg\":\"添加成功！\",\"success\":true}");
}
else
{
context.response.write("{\"msg\":\"添加失败，请核对信息！\",\"success\":false}");
}
}
原型图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论