前端使用ajax向后台传递文件及变量

前端使用ajax向后台传递文件及变量


                <input type="file" id="file"  onchange="UploadFunction()" />
                <input type="button" value="上传" id="upload" />
            </div>

            <div id="fileinfo">
                <ul id="file_sd"></ul>
            </div>
            <div id="jindutiao">
                <label for="myProgress">进度条</label>
                <progress id="myProgress" value="0" max="100"></progress>
                <span id="mySpan"></span>
            </div>
        </div>

js

$(function () {
$("#jindutiao").hide();
$("#upload").click(function () {

            $("#jindutiao").show();

            //进度条
            var myProgress = document.getElementById("myProgress");
            var mySpan = document.getElementById("mySpan");
            var value = myProgress.value;
            mySpan.innerText = value + "%";
            var ID = setInterval(function () {
                value = myProgress.value;
                if (value < 80) {
                    value += 10;
                    myProgress.value = value;
                    mySpan.innerText = value + "%";
                    if (value == 80) {
                        clearInterval(ID);
                    }
                }

            }, 20);
            debugger
            var needer = $("#needer").val();
            var jobnumber = $("#jobnumber").val();
            var needtime = $("#needtime").val();
            var needsubject = $("#needsubject").val();
            var needtext = $("#needtext").val();

           
            //上传
            var formdata = new FormData();
            formdata.append("file", $('#file')[0].files[0]);
            formdata.append("needer", needer);
            formdata.append("jobnumber", jobnumber);
            //formdata.append("needtime", needtime);
            formdata.append("needsubject", needsubject);
            formdata.append("needtext", needtext);

------ajax 中添加
contentType: false, // 不设置内容类型
processData: false, // 不处理数据
两个属性

            $.ajax({
                type: "POST",
                url: "FileUP",
                data: formdata ,
               contentType: false, // 不设置内容类型
                processData: false, // 不处理数据
                dataType: "json",
                success: function (res) {
                    if (res.ISSuccess) {
                        var AS = setInterval(function () {
                            value += 10;
                            myProgress.value = value;
                            mySpan.innerHTML = value + "%";
                            if (value == 100) {
                                clearInterval(AS);
                                alert("上传成功!");
                            }
                        }, 20)
                        alert("上传成功!");
                            //刷新页面
                            window.location.reload();
                    }

                },
                error: function (data) {

                    // 请求失败后要执行的代码

                    alert("上传失败!")

                }
            });




        })

      


    })
    function UploadFunction() {
    
        var size = $("#file")[0].files[0].size;
        size = (size / (1024 * 1024)).toFixed(2);

        var filename = $("#file")[0].files[0].name;
        var type = $("#file")[0].files[0].type;
        var LastTime = $("#file")[0].files[0].lastModifiedDate;

        var fileinfo = "";
        fileinfo = "<li>" + filename + "<span style='width: 50px;'></span> " + size + "M " + "</li>";

        $("#file_sd").append(fileinfo);
        //alert(type + LastTime);
    }

后台

       bool ISSuccess = true;
        string [] FormKey = Request.Form.AllKeys;
        string [] needer = Request.Form.GetValues(FormKey[0]);
        string [] jobnumber = Request.Form.GetValues(FormKey[1]);
        string [] needsubject = Request.Form.GetValues(FormKey[2]);
        string [] needtext = Request.Form.GetValues(FormKey[3]); 
        foreach (string upload in Request.Files.AllKeys)
        {
            var file = Request.Files[upload];
            string fileExt = "";
            string name = file.FileName;
            fileExt = name.Split('.')[1];
            try
            {
                Random random = new Random();
                //保存文件的虚拟路径
                string path = "UploadFile";
                //获取选择的文件名
                string fileName = file.FileName;
             
                //获取文件扩展名称
                fileExt = Path.GetExtension(fileName);

                string[] sArray = fileName.Split(new string[] { fileExt },                      StringSplitOptions.RemoveEmptyEntries);

                //生成新文件名
                string NewName;
                NewName = needsubject[0]+"" + needer[0];
                NewName += sArray[0] + DateTime.Now.ToString("yyyyMMddHHmmssfff");

                //获取指定虚机路径的物理路径
                string fullPath = Server.MapPath("../"+path);
                //上传文件保存路径
                string savePath = fullPath+ "\\"+ NewName + fileExt;
                //DBHelpter.MsgBox(savePath);
                //保存文件到服务器
                file.SaveAs(savePath);
            }
            catch (Exception ex )
            {
                ISSuccess = false;

            }
        }
        return Json(new { ISSuccess = ISSuccess });
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文中金域

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值