直接进入正题:
//**********asp.net 前台页*********************************************************************************************
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImg.aspx.cs" Inherits="jq_form_plug.UploadImg" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/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; } } }}