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

直接进入正题：

//**********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="data: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="data: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="data: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;
}
}
}
}

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

asp.net 利用jquery.form插件上传图片相关推荐

jquery form java_springmvc利用jquery.form插件异步上传文件示例
需要的下载文件: jQuery.form.js jquery.js commons-fileupload.jar commons-io.jar 示例图片 pom.xml commons-fileupl ...
【转】4.2使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是今天我想介绍的是一款jQuery的插件:Jquery.form. ...
怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#"A ...
jQuery form插件的使用
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxFor ...
jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxForm ...
jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用自定义jq ...
jquery form插件(ajax)上传文件实现及原理
原理: jquery form插件ajax上传文件的原理, 1.浏览器实现了XMLHttpRequest level2规范的,则插件使用xhr直接提交文件.通常来说chrome.firefox都实现了 ...
jQuery form插件之ajaxForm()和ajaxSubmit()
代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> < ...
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
原文:http://www.jb51.net/article/78536.htm Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署 ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...

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

asp.net 利用jquery.form插件上传图片相关推荐

最新文章

热门文章