基于ASP.NET+easyUI框架实现图片上传功能(表单)

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：2190 次日期：2016-08-05 16:23:07

温馨提示：小编为您整理了“基于ASP.NET+easyUI框架实现图片上传功能(表单)”,方便广大网友查阅！

这篇文章主要介绍了基于ASP.NET+easyUI框架实现图片上传功能的相关资料,需要的朋友可以参考下

基于ASP.Net +easyUI框架上传图片，实现图片上传，提交表单：

<body>

//检查图片的格式是否正确,同时实现预览

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>

<tr>

链接名称：

</th>

<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>

链接logo：

</th>

选择图片:<input id="idFile" style="width: 224px" runat="server" name="idFile" onchange="javascript:setImagePreview(this,localImag,preview);"

type="file" />

</div>

<%--预览:

<img id="preview" onclick="over(preview,divImage,imgbig);" src="" style="width: 200px;

height: 150px;" />

</div>--%>

</td>

</tr>

</table>

上传</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}");

}

原型图：

以上就是本文的全部内容，希望对大家的学习有所帮助

上一篇：基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览)

下一篇：ASP.NET配合jQuery解决跨域调用的问题

手机网站地址：基于ASP.NET+easyUI框架实现图片上传功能(表单)

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！