asp.net 利用jquery.form插件上传图片

最新推荐文章于 2023-01-05 18:31:41 发布

转载最新推荐文章于 2023-01-05 18:31:41 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhengchengye/p/5363320.html

本文介绍了一个使用ASP.NET和jQuery实现的图片上传示例，包括前端页面布局、JavaScript交互及后端处理逻辑。该示例支持上传jpg、png和gif格式的图片，并在上传成功后预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接进入正题：

//**********asp.net 前台页*********************************************************************************************

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImg.aspx.cs" Inherits="jq_form_plug.UploadImg" %>

<!DOCTYPE html>

/***********************引用一下三个js库*******************************/
<script src="Script/jquery-1.7.1.intellisense.js"></script>
<script src="Script/jquery-1.7.1.js"></script>
<script src="Script/jquery.form.js"></script>

/***********************此js包含上传方法*******************************************/
<script src="Script/uploadImg.js"></script>
<style>
.file{display:none}
</style>
</head>
<body>
<form id="form1" runat="server">
<img src="images/AB.png" id="showimg_1" width="66" height="66" />
<input type="file" id="file_1" name="file_1" class="file" />
<input type="button" value="上传图片" onclick="uploadImg(1)" />
<p></p>
<img src="images/AB.png" id="showimg_2" width="66" height="66" />
<input type="file" id="file_2" name="file_2" class="file" />
<input type="button" value="上传图片" onclick="uploadImg(2)" />
<p></p>
<img src="images/AB.png" id="showimg_3" width="66" height="66" />
<input type="file" id="file_3" name="file_3" class="file" />
<input type="button" value="上传图片" onclick="uploadImg(3)"/>
</form>
</body>
</html>

//*****************js 上传****************************************/

/*
||=================================================================||
||注：格式要求： ||
|| 1：file元素id为file_1/file_2/file_3格式。 ||
|| 2：默认图片img元素id为showimg_1/showimg_2/showimg_3格式 ||
|| 3:*file元素必须指定name值为file_1/file_2/file_3格式 ||
|| 4：表单提交form元素id为form1 ||
|| *可以更改 ||
||=================================================================||
*/
function uploadImg(flag) {
$("#file_" + flag + "").click();//触发事件
$("#file_" + flag + "").change(function () {
if ($.trim($("#file_" + flag + "").val()) == "") {
return;
}
var arr = $.trim($("#file_" + flag + "").val()).split('.');//截取得到后缀
if (!/(?:jpg|png|gif)$/.test(arr[1])) {
alert("图片只能是jpg,gif,png");
return;
}
$("#form1").ajaxSubmit({
beforeSend: function () {
$("#showimg_" + flag + "").empty();//删除匹配的元素集合中所有的子节点。可以去掉
$("#showimg_" + flag + "").attr("src", '../images/temp.gif');
},
data: { flag: flag },//标识数据：表示具体第几个file元素
url: "../data/upload.ashx",
type: "post",
success: function (data) {
if (data != null) {
//IE显示图片会默认加上<PRE></PRE>，着必须要把去除掉才能在低版本ie显示
data = data.replace("<PRE>", "").replace("</PRE>", "");
$("#showimg_" + flag + "").attr("src", data);
}
else {
alert("上传失败！请联系技术客服！");
}
}
})
})
}

//*************************************一般程序集****************************************************

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace jq_form_plug.data
{
/// <summary>
/// upload 的摘要说明
/// </summary>
public class upload : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int flag = int.Parse(context.Request.Form["flag"].ToString());
HttpPostedFile img = null;
if (flag == 1)
{
//获取上传的文件的对象
img = context.Request.Files["file_1"];
}
else if (flag == 2)
{
//获取上传的文件的对象
img = context.Request.Files["file_2"];
}
else if (flag == 3)
{
//获取上传的文件的对象
img = context.Request.Files["file_3"];
}
if (img != null && img.ToString().Length > 0)
{
string file = DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".jpg";
string path = @"../upimg/" + file;
//string path = context.Request.PhysicalApplicationPath + @"upimg/";
//string originalImagePath = path + file;//原图片物理路径
//string sthumbnailPath = path + "/s_" + file;
//string mthumbnailPath = path + "/m_" + file;
try
{
img.SaveAs(context.Server.MapPath(path));//将原图进行保存
//Thumbnail.MakeThumbnail(originalImagePath, sthumbnailPath, 200, 200, "HW");
//Thumbnail.MakeThumbnail(originalImagePath, mthumbnailPath, 302, 270, "HW");
//string url = Jnwf.Utils.Config.ConfigurationUtil.GetAppSettingValue("picture").ToString();
context.Response.Write(path);
}
catch (Exception ex)
{
context.Response.Write("");
}
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

转载于:https://www.cnblogs.com/zhengchengye/p/5363320.html