asp.net上传文件

第一种方法

前端：

    <div>
        单文件上传
        <form enctype="multipart/form-data" method="post" action="upload.aspx">
            <input type="file" name="files" />
            <input type="submit" value="上传" />
        </form>
    </div>

后端：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class upload_upload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpContext context = HttpContext.Current;
        context.Response.ContentType = "text/plain";
        //获取所有的上传文件
        //如果上传的文件超过了4M，则会报异常[超过了最大请求长度。]，需要在Web.config配置
        HttpFileCollection hfc = context.Request.Files;
        //如果是hfc.Count为0，则可以认为是直接请求该ashx处理程序
        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0)
            {
                //大小限制
                int maxSize = 2 * 1024 * 1024;  //最大是2M(转换为字节)
                if (hpf.ContentLength > maxSize)
                {
                    context.Response.Write("上传文件大小超出限制");
                    return;
                }
                //扩展名限制
                string[] exts = { "image/jpg", "image/jpeg", "image/gif", "image/png" };
                if (!exts.Contains(hpf.ContentType.ToLower()))
                {
                    context.Response.Write("必须上传图片文件");
                    return;
                }
                string fileName = Path.GetFileName(hpf.FileName);
                hpf.SaveAs(context.Server.MapPath("~/upload/" + fileName));
            }
        }

        获取指定name的文件上传
        该方式如果是html5的<input type="file" name="files" multiple />则始终是获取第一个上传的文件，multiple
        是支持多个文件上传，所以如果上传文件多于一个，则会丢失
        //HttpPostedFile hpf = context.Request.Files["files"];
        //if (hpf!= null && hpf.ContentLength > 0)
        //{
        //    hpf.SaveAs(context.Server.MapPath("~/UpLoad/" + Path.GetFileName(hpf.FileName)));
        //}
        context.Response.Write("上传成功");
    }
}

第二种方法

前端(1)

<div id="divImg">

<input type="file" class="file" name="file" multiple="multiple" id="file"/>

<button type="button" οnclick="uploadFile()">上传</button>

</div>

js

function uploadFile(){
        let files = $("#file").prop("files");
        let formData = new FormData();
        // 对每个文件进行循环处理
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            // 添加文件到formData
            formData.append('files['+i+']', file, file.name);
        }
        $.ajax({
            url: ctx + "/file/upload",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            success: function(data) {
                console.log(data);
            }
        });
    }

前端（2）

js

   <form id="fileUploadForm" enctype="multipart/form-data">
        <input type="file" id="fileInput">
        <button type="submit">上传</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#fileUploadForm').submit(function(e) {
                e.preventDefault();

                var fileInput = document.getElementById('fileInput');
                var file = fileInput.files[0];

                var reader = new FileReader();
                reader.onload = function(e) {
                    var fileData = e.target.result;

                    var formData = new FormData();
                    formData.append('file', file);

                    $.ajax({
                        url: 'upload.php',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            console.log(response);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                };
 

后端同每一种方法