直接进入正题：
//********** 前台页*********************************************************************************************
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImg.aspx.cs" Inherits="jq_form_plug.UploadImg" %>
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
/***********************引用一下三个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="上传图片" οnclick="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="上传图片" οnclick="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="上传图片" οnclick="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;
}
}
}
}
