HTML中選中圖片的按鈕：
<div>頭像</div>
<div class="tuxiang-up" id="headPortrait" style="background-image:url(/Content/ExSys/images/ktoux.jpg))">
<input type="file" onchange="uploadImage(this)">
<!--點擊上傳按鈕后，圖片縮略圖以上級背景圖片顯示-->
</div>
Jquery中FormData二進制檔案物件拼接和提交：
script type="text/javascript">
//用戶頭像修改
function uploadImage(obj) {
var formData = new FormData();//創建FormData物件，以鍵值對的方式拼接form表單資料（multipart/form-data，圖片媒體檔案）
//獲取input中的檔案串列資訊
var files = $(obj).prop("files");
//拼接圖片檔案流資訊
console.log(files[0]);
formData.append("file", files[0]);
$.ajax({
url: "/FileUpload/FileLoad/",
type: 'POST',
data: formData,
async: false,
dataType: "json",
// 告訴jQuery不要去處理發送的資料
processData: false,
// 告訴jQuery不要去設定Content-Type請求頭
contentType: false,
beforeSend: function () {
console.log("正在進行，請稍候");
},
success: function (data) {
if (data.isSuccess) {
console.log(data.path);
console.log("圖片上傳成功");
//動態賦值
$("#headPortrait").css("background-image", "url(" + data.path + ")");
}
else {
console.log("網路例外，請稍后再試");
}
},
error: function (data) {
console.log("error2");
}
});
}
</script>
服務端接收Ajax異步提交的二進制圖片檔案資訊，并保存
對驗證和處理 HTML 表單中的輸入資料所需的資訊進行封裝，如FromData拼接而成的檔案
FemContext對驗證和處理html表單中輸入的資料進行封裝
[HttpPost]
public ActionResult FileLoad(FormContext context)
{
HttpPostedFileBase httpPostedFileBase = Request.Files[0];//獲取二進制圖片檔案流
if (httpPostedFileBase != null)
{
try
{
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始檔案名稱
string fileExtension = Path.GetExtension(fileName);//檔案擴展名
byte[] fileData = ReadFileBytes(httpPostedFileBase);//檔案流轉化為二進制位元組
string result = SaveFile(fileExtension, fileData);//檔案保存
if (string.IsNullOrEmpty(result))
{
return Json(new { isSuccess = false, path = "",errorMsg= "上傳檔案失敗"});
}
return Json(new { isSuccess = true, path = result });
}
catch (Exception e)
{
return Json(new { isSuccess = false, path = "" });
}
}
else
{
return Json(new { isSuccess = false, path = "" });
}
}
/// <summary>
/// 將檔案流轉化為二進制位元組
/// </summary>
/// <param name="fileData">圖片檔案流</param>
/// <returns></returns>
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (Stream inputStream = fileData.InputStream)
{
MemoryStream memoryStream = inputStream as MemoryStream;
if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
}
/// <summary>
/// 保存檔案
/// </summary>
/// <param name="fileExtension">檔案擴展名</param>
/// <param name="fileData">圖片二進制檔案資訊</param>
/// <returns></returns>
private string SaveFile(string fileExtension, byte[] fileData)
{
string result;
try
{
string saveName = Guid.NewGuid().ToString() + fileExtension; //保存檔案名稱
// 檔案上傳后的保存路徑
string basePath = "UploadFile";
string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
string savePath = System.IO.Path.Combine(saveDir, saveName);
string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);
if (!System.IO.Directory.Exists(serverDir))
{
System.IO.Directory.CreateDirectory(serverDir);
}
string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存檔案完整路徑
System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes創建一個新的檔案，按照對應的檔案流寫入，假如已存在則覆寫
//回傳完整的圖片保存地址
result="/"+basePath + "/" + saveDir + "/" + saveName;
}
catch (Exception)
{
result = "發生錯誤";
}
return result;
}
}
uj5u.com熱心網友回復：
樓主這是想表達什么uj5u.com熱心網友回復：
if (!System.IO.Directory.Exists(serverDir)){
System.IO.Directory.CreateDirectory(serverDir);
}
這句有點多余了，CreateDirectory如果是已存在的目錄，會忽略，且不會報錯。所以你可以直接CreateDirectory
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/12160.html
標籤：其他
上一篇：新人菜鳥求助個小問題？