一、前言
之前做圖片上傳一直用的第三方插件，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技術交流群