asp.net下使用 jquery.form.js 上傳圖片（檔案）

首先需要引入外部js外掛在專案中，使用的jquery版本為 1.7.2

<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>

一、 js程式碼如下

二、HTML程式碼段如下：

注意：

1、新增的 form標籤需要 id method enctype 三個屬性（有待驗證method 屬性是否是必須的）

2、input file標籤必須包含 name 屬性。否則後臺獲取不到

<form id="frmQuery" method="post" enctype="multipart/form-data">


<div class="huifu" id="div_huifu_1" style="display: none;">
<div class="pic_hf">
<img src="../../image/pagesimgs/jn_15.jpg" alt="" /></div>
<div class="hf_con">
<textarea name="" id="txt_content_1">請在此輸入內容</textarea>
<a href="javascript:void(0);">插入圖片</a><div id="img1">
</div>
<input type="file" name="img_1" id="img_1" onchange="previewImage(this,'img1')" />
<input type="button" class="btn-fk" onclick="stuContinueCommunication('1')" value="提交反饋" />
</div>
<div class="clear">
</div>
</div>

</form>

三、asp.net 後臺程式碼如下

注意：

1、一般處理程式的型別一定要是context.Response.ContentType = "text/html;charset=UTF-8"; 否則獲取不到提交的檔案

2、imgIndexName 是由主鍵+其他資訊確定獲取指定的檔案（此處為上傳圖片）

public class HFeedback : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
// context.Response.ContentType = "text/plain"; //handler預設的型別
context.Response.ContentType = "text/html;charset=UTF-8"; // 需要使用的型別否則無法獲取提交的檔案
string requestType = context.Request["type"];

#region 新增回復
if (requestType == "replyFeedback")
{

string feedbackQuestionId = context.Request["feedbackQuestionId"];
Int64 intFeedbackQuestionId = string.IsNullOrEmpty(feedbackQuestionId) ? -1 : Convert.ToInt64(feedbackQuestionId);

string FromUserId = user.UserData.LoginName;
int FromUserRoleType = user.UserData.Identity;
string ToUserId = context.Request["ToUserId"];
string strToUserRoleType = context.Request["ToUserRoleType"];
int ToUserRoleType = string.IsNullOrEmpty(strToUserRoleType) ? -1 : Convert.ToInt16(strToUserRoleType);

string TextContent = context.Request["TextContent"];
string ImgContent = "";
DateTime CreateTime = DateTime.Now;
// 0 已回覆過 1 一次都未回覆
string isFirstFeedback = context.Request["isFirstFeedback"];
DealInfoResult dealInfoResult = new DealInfoResult();
try
{
List<string> lstImgType = new List<string> { ".jpg", ".png", ".jpeg", ".bmp", ".gif", ".psd", ".svg" };
string imgName = "";
string imgIndexName = "img_" + feedbackQuestionId + "";// 按照名稱獲取提交的檔案，避免取多個檔案進行上傳
System.Web.HttpFileCollection files = context.Request.Files;
if (files != null && files.Count > 0 && files[imgIndexName] != null)
{
System.Web.HttpPostedFile postedfile = files[imgIndexName];
string FileExtension = "";
if (postedfile.FileName != "")
{
imgName = postedfile.FileName;
FileInfo fi = new FileInfo(imgName);
imgName = fi.Name;
FileExtension = fi.Extension;
if (lstImgType.Contains(FileExtension.ToLower().Trim()))
{
// 上傳圖片到指定目錄
string filepath = context.Server.MapPath("~/Resource/FeedbackImgs/");
//判斷檔案是否小於10Mb
if (postedfile.ContentLength > 10485759)
{
context.Response.Write("上傳圖片不能大於10MB！");
return;
}
// 判斷檔案是否已經匯入過
if (!Directory.Exists(filepath))
{
Directory.CreateDirectory(filepath);
}
if (File.Exists(filepath + imgName))
{
ImgContent = imgName;
}
else
{
//上傳檔案並指定上傳目錄的路徑
postedfile.SaveAs(filepath + imgName);
ImgContent = imgName;
}
}
}
else
{
context.Response.Write("檔案無效！");
return;
}
}

dealInfoResult.ResultStatus = feedbackBLL.AddFeedbackCommunicationAdmin(modelFeedbackCommunication) == true ? 1 : 0;
}
catch (Exception ex)
{
dealInfoResult.ResultStatus = -1;
dealInfoResult.ExceptionInfo = ex.Message;
}
context.Response.Write(JsonConvert.SerializeObject(dealInfoResult));// 外掛將物件轉換為json格式
return;
}
#endregion

}

asp.net下使用 jquery.form.js 上傳圖片（檔案）

相關文章