JQ 上传文件(单个,多个,分片)

最原始的方式:

前端代码:

    <div>
        <span>最原始的方式</span><br />
        <span>条件1:必须是 post 方式</span><br />
        <span>条件2:必须注明是传输文件 enctype="multipart/form-data"</span><br />
        <span>条件3:必须设置name属性,name="myFile"</span><br />
        <form id="myForm1" method="post" enctype="multipart/form-data" action="http://localhost:42561/api/upload/upload">
            <input type="file" name="myFile" />
            <input type="submit" value="原始form表单上传文件" />
        </form>
    </div>

后台代码:

        public async Task<HttpResponseMessage> Upload()
        {
            var files = HttpContext.Current.Request.Files;
            var path = HttpContext.Current.Server.MapPath("/img/");
            if (files.Count > 0)
            {
                foreach (string file in files)
                {
                    //这里的 file ,就是 input[type="file"] 标签的name属性的值,
                    //这也是为什么上传文件,input[type="file"] 标签必须设置name属性的值的原因之一.
                    var img = files[file];
                    if (img?.ContentLength > 0)
                    {
                        var fileName = img.FileName;
                        await Task.Run(() => img.SaveAs(path + fileName));
                    }
                }
                return new HttpResponseMessage(HttpStatusCode.OK);
            }
            return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "没有文件");
        }

利用FormData上传单个文件

前端代码:

    <div>
        <span>利用FormData上传单个文件</span><br />
        <form id="myForm2">
            <input type="file" name="myFile" />
            <input type="button" value="利用FormData上传单个文件" onclick="uploadOne()" />
        </form>
    </div>

        function uploadOne() {
            var url = "http://localhost:42561/api/upload/upload";

            //这里之所以会写成[0],是因为$(...)是JQ对象,是个数组,而这里需要传入的是JS对象.
            var data = new FormData($("#myForm2")[0]);
            $.ajax({
                url: url,
                data: data,
                type: "post",
                processData: false,//表示提交的时候不会序列化 data,而是直接使用 data,默认为 true
                contentType: false,//表示不要去设置Content-Type请求头
                cache: false,//设置为 false 将不会从浏览器缓存中加载请求信息。
                success: function () { }
            });
        }

利用FormData上传多个文件

前端代码:

    <div>
        <span>利用FormData上传多个文件</span><br />
        <form id="myForm3">
            <input type="file" id="myFile" multiple />
            <input type="button" value="利用FormData上传多个文件" onclick="uploadSome()" />
        </form>
    </div>

        function uploadSome() {
            var url = "http://localhost:42561/api/upload/upload";

            var data = new FormData();
            var files = $("#myFile")[0].files;
            for (var i = 0; i < files.length; i++) {
                //这里的 myFile0,myFile1,myFile2就是input type="file" 标签的name属性,所以标签里面可以不用写name属性了
                data.append("myFile" + i, $("#myFile")[0].files[i]);
            }
            $.ajax({
                url: url,
                data: data,
                type: "post",
                processData: false,
                contentType: false,
                cache: false,
                success: function () { }
            });
        }

分片上传

前端代码:

    <div>
        <span>分片上传单个文件</span><br />
        <form id="myForm4">
            <input type="file" id="myFileStep" />
            <input type="button" value="分片上传单个文件" onclick="uploadStep()"/>
        </form>
        <br />
        <span class="result"></span>
    </div>

   function uploadStep() {
            var upload = function (file, skip) {
                var data = new FormData();
                var blockSize = 1000;
                var nextSize = Math.min((skip + 1) * blockSize, file.size);
                var fileData = file.slice(skip * blockSize, nextSize);
                data.append("myFile", fileData);

                //由于传输的是二进制数据(fileData),后台(MVC或者Api无法通过files[0].FileName获取文件名
                //所以只能通过构造form表单数据传递(键值对形式,fileName=xxx.jpg&aaa=yyy),后台再通过request.Form[fileName]获取
                data.append("fileName", file.name);
                var url = "http://localhost:42561/api/upload/uploadStep";
                $.ajax({
                    url: url,
                    type: "POST",
                    data: data,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function () {
                        $(".result").html("已经上传了" + (skip + 1) + "块文件");
                        if (file.size <= nextSize) { //如果上传完成，则跳出继续上传
                            alert("上传完成");
                            return;
                        }
                        upload(file, ++skip); //递归调用
                    }
                });
            };
            var file = $("#myFileStep")[0].files[0];
            upload(file, 0);
        }

后台代码:

        public HttpResponseMessage UploadStep()
        {
            var path = HttpContext.Current.Server.MapPath("/img/");
            var name = HttpContext.Current.Request.Form["fileName"];
            var filePath = path + name;
            //创建一个追加（FileMode.Append）方式的文件流
            using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
            {
                var file = HttpContext.Current.Request.Files[0];
                //方法一
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    //读取文件流
                    BinaryReader br = new BinaryReader(file.InputStream);
                    //将文件流转成字节数组
                    byte[] bytes = br.ReadBytes((int)file.InputStream.Length);
                    //将字节数组追加到文件
                    bw.Write(bytes);
                    br.Dispose();
                }
                //方法二
                //Stream sm = file.InputStream;
                //byte[] bytes = new byte[sm.Length];
                //sm.Read(bytes, 0, bytes.Length);
                //fs.Write(bytes, 0, bytes.Length);
                //sm.Dispose();
            }
            return new HttpResponseMessage(HttpStatusCode.OK);
        }