使用Ajax以及Jquery.form异步上传图片

一、前言

之前做图片上传一直用的第三方插件，Uploadify 这个应该是用的比較多的，相同也用过别的。在方便了自己的同一时候也非常赞叹人家的功能。思来想去。仅仅会用别的人东西，始终自己学到的少，还是自己做个尝试一下吧。

二、效果

先来看看效果， 这是做微信接口开发的时候做的，比較简陋，仅仅是要实现功能而已。

(1):这是上传前的。

(2):这是未选择图片。

(3)：这是选择好图片后的。

(4):这是上传后的效果，返回图片路径 ，然后显示在页面上。由于用的是ajax方式。所以不会看到页面刷新。

三、实现方式

(1):aspx页面代码

<input id="file_temporaryImage" type="file" name="file_temporaryImage" />  <div id="div_temporaryImage"></div><br />
<input id="btn_temporary" type="button" value="上传暂时素材" onclick="javascript:TemporaryMedia();" />

(2):所用到的js方法

/***
2015年4月29日10:26:17
小马
微信上传素材管理
**/

/********************上传暂时素材  Start*****************************/
function TemporaryMedia() {
//var image0 = $("input[name='file_temporaryImage']").val();
//推断上传控件中是否选择了图片
var image = $("#file_temporaryImage").val();
if ($.trim(image) == "") {
alert("请选择图片！");
return;
}
//提交请求处理的url
var actionUrl = "ImageUpload.ashx";
//開始ajax操作
$("#form1").ajaxSubmit({

type: "POST",//提交类型
dataType: "json",//返回结果格式
url: actionUrl,//请求地址
data: { "action": "TemporaryImage" },//请求数据
success: function (data) {//请求成功后的函数

if (data.status == "warning") {//返回警告
alert(data.msg);
} else if (data.status == "success") {//返回成功
$("#div_temporaryImage").append("<img style='width:300px;height:300px;' src='" + data.msg + "' /><span>暂时素材mediaId:" + data.uploadmsg.media_id + "</span>");
}

},
error: function (data) { alert(data.msg); },//请求失败的函数
async: true

});

}
/********************上传暂时素材  End*****************************/

(3):所用到 的一般处理程序代码。

using System;
using System.IO;
using System.Text;
using System.Web;
using WeiXin_Web.Common;
using WX_Tools;
using WX_Tools.Entites;

namespace WeiXin_Web
{
/// <summary>
/// ImageUpload 的摘要说明
/// </summary>
public class ImageUpload : IHttpHandler
{

private HttpContext _httpContext;

public void ProcessRequest(HttpContext context)
{

_httpContext = context;

//  context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
//获取请求
string requestAction=context.Request.Form["action"];

switch (requestAction)
{
//暂时图片素材
case "TemporaryImage":
TemporaryMeidaUpload();
break;
}

}

//回复消息状态
private enum status
{
error,
success,
warning
}

/// <summary>
/// 上传暂时素材
/// </summary>
private void TemporaryMeidaUpload()
{
//返回格式：{"status":"error,success,warning","msg":""}

// string result = "{\"status\":\"{0}\",\"msg\":\"{1}\"}";

try
{
//依据前台html的name获取文件
HttpPostedFile upfile = _httpContext.Request.Files["file_temporaryImage"];

if (upfile == null)
{

ResponseWriteEnd(status.warning.ToString(), "没有选择文件");

}

//文件原名称
string oldMediaName = upfile.FileName;

//文件后辍名称
string oldMediaExtension = Path.GetExtension(oldMediaName);

//推断文件格式是否符合要求
if (!oldMediaExtension.ToLower().Equals(".jpg"))
{

ResponseWriteEnd(status.warning.ToString(), "请上传jpg格式的文件！

");
return;
}

//推断文件大小是否符合要求
if (upfile.ContentLength >= (1024*1024*1))
{
ResponseWriteEnd(status.warning.ToString(), "请上传1M以内的文件！");
return;
}

string imgName = DateTime.Now.ToString("yyyy-MM-dd-HH-ss") + DateTime.Now.Ticks;
bool flag = false;

try
{
upfile.SaveAs(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));
flag = true;
}
catch (Exception e)
{

//写入日志

}

if (flag)
{
//返回json

ResponseWriteEnd(status.success.ToString(), "/Upload/" + imgName + ".jpg");

}
else
{
File.Delete(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));

ResponseWriteEnd(status.warning.ToString(), "图片保存出错，已经被删除。

");
}
}
catch (Exception EX_NAME)
{

ResponseWriteEnd(status.error.ToString(),EX_NAME.ToString());
}
}

/// <summary>
/// 输出方法
/// </summary>
/// <param name="status"></param>
/// <param name="msg"></param>
private void ResponseWriteEnd(string status,string msg,string uploadMsg="")
{
StringBuilder stringBuilder=new StringBuilder();
stringBuilder.Append("{");
stringBuilder.Append("\"status\":");
stringBuilder.AppendFormat("\"{0}\",", status);
stringBuilder.Append("\"msg\":");
stringBuilder.AppendFormat("\"{0}\",", msg);
stringBuilder.Append("\"uploadmsg\":");
stringBuilder.AppendFormat("{0}", uploadMsg);
stringBuilder.Append("}");

_httpContext.Response.Write(stringBuilder.ToString());
// _httpContext.Response.End();此方法会引起  中止线程错误 。

_httpContext.ApplicationInstance.CompleteRequest();
}

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

(4):要记得引入jquery.form.js这个文件。

四、源代码下载

因为这是我做微信接口开发中的代码的一部分，所以这里给出完整的微信接口开发的代码的地址，我托管在了github上，大家能够下载。也能够一起来编写这个项目。
https://github.com/anyangmaxin/WeiXin

五、欢迎增加.net技术交流群

欢迎增加.net技术交流群