用jQuery實現檔案上傳的方法

阿新 • • 發佈：2022-05-19

1、利用FormData實現檔案上傳

<input type="file" id="avatar" name="avatar">
<button type="button">儲存</button>

('button').click(function(){
 var files = $('#avatar').prop('files'); //多個
 //或者
 var files = $('#avatar')[0].files[0] //單個
 
 var data = new FormData();
 data.append('avatar', files[0]);
 
 $.ajax({
  url:  
'/api/upload',
  type: 'POST',
  data: data,
  cache: false,
  processData: false,
  contentType: false
 });
});

2、一般處理程式上傳檔案

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace CCOA.App.common.api
{
     
/// <summary>
    /// CommUploadFile 的摘要說明
    /// </summary>
    public class CommUploadFile : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            try {
            HttpPostedFile file = context.Request.Files[" 
file1"];
            //是否上傳檔案
            if (file.ContentLength <= 0) //檔案大小
            {
                //請選擇要上傳的檔案
                context.Response.Write("");
                return;
            }

            //上傳檔案大小檢測
            if (file.ContentLength > 1024 * 1024*5)
            {
                //上傳檔案大小不能超過5M
                context.Response.Write("");
                return;
            }

            //上傳檔案字尾名檢測
            string filename = file.FileName; //檔案絕對地址
            string suffix = Path.GetExtension(filename); //擷取字尾
            //if (suffix != ".jpg" & suffix != ".jpeg")
            //{
            //    context.Response.Write("只允許上傳jpg檔案");
            //    return;
            //}

            #region 儲存檔案
            //重新命名：GUID（全球唯一識別符號）推薦！！！
            filename = string.Format("{0}{1}", Guid.NewGuid().ToString("N"), suffix);

            //建立目錄
            string dirFullPath = context.Server.MapPath("~/UploadFile/");

            //如果資料夾不存在，則先建立資料夾
            if (!Directory.Exists(dirFullPath))
            {
                Directory.CreateDirectory(dirFullPath);
            }

            //將兩個字元組合成一個路徑
            string fileFullPath = Path.Combine(dirFullPath, filename);
            //儲存檔案
            file.SaveAs(fileFullPath);

            string clientFilePath = "/CCOA/UploadFile/" + filename;
            context.Response.Write(clientFilePath);
            }
            catch (Exception ex)
            {
                context.Response.Write("");
            }
            #endregion
        }

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