文件上传

Posted 2021-03-21 yutang-wangweisong

文件上传时需要用到AJax方法的 ，首先需要添加JQ引用

<script src="../Scripts/jquery-3.4.1.min.js"></script>

然后取值  取到需要传送到后台的数值

例如：

 //先取到值
        var SEOTitle = $("#SEOTitle").val()
        var SEOKeywords = $("#SEOKeywords").val()
        var SEODescription = $("#SEODescription").val()
        var Ftype = $("#Ftype").val()
        var FName = $("#FName").val()
        var FAbout = $("#FAbout").val()
        var FGeneral = $("#FGeneral").val();
        var PPhone = $("#PPhone").val();

在将图片做下处理

 var imgData = new FormData();
        var files = document.getElementById(‘FImg‘);
        var file = files.files[0];//files 不存在

再将取到的值和处理过的图片进行封装

 //将数值全部封装在一起 
        imgData.append(‘file‘, file);
        imgData.append(‘jsonData‘, JSON.stringify({ Ftype: Ftype, FName: FName, FAbout: FAbout, FGeneral: FGeneral, PPhone: PPhone, FDetails: FDetails, SEOTitle: SEOTitle, SEOKeywords: SEOKeywords, SEODescription: SEODescription }));

最后使用ajax进行后台传输

传输时 data为封装号的数值

contentType: 改为 false   意思是不对封装好的数值在进行解析

 //使用AJAX方法将封装好的数值传入后台，传入时不用在做处理
        $.ajax(
            {
                type: "POST",
                url: "EtpList.ashx?action=EtpAdd",
                data: imgData,          //传值为封装还得imgData
                contentType: false,      //不在进行转换直接传到后台
                dataType: "json",
                processData: false,
                async: false,
                cache: false,
                success: function (data) {

                    if (data.state) {
                        //提示并刷新页面
                        swal({
                            title: data.msg, //弹出框的title
                            type: "success",      //弹出框类型
                            showCancelButton: false,//是否显示取消按钮
                            timer: 1000,
                        }, function (isConfirm) {
                            window.location.href = data.url;
                        }
                        );


                    }
                    else {
                        swal({
                            title: data.msg,   //弹出框的title
                            type: "warning",   //淡出框类型
                            showCancelButtun: false,//是否显示取消按钮
                            confirmButtonColor: "#DD6B55",//确定按钮颜色
                            confirmButtonText: "确定", //确定按钮上面的文档
                            closeOnConfirm: true,
                            timer: 1000,
                        },
                            function (isConfirm) {
                                window.location.href = data.url;
                            }
                        );
                    }
                },
                error: function () {
                    swal({
                        title: "服务器异常", //弹出框的title
                        type: "waring",  //弹出框类型
                        showCancelButton: false,   //是否显示取消按钮
                        confirmButtonColor: "#DD6B55",//确定按钮上面的文档
                        closeOnConfirm: true

                    });
                }
            })

以上方式就可以将文件上传到后台了

图片上传格式链接：https://www.cnblogs.com/yutang-wangweisong/p/12076484.html

图片上传显示到上传框内格式链接：https://www.cnblogs.com/yutang-wangweisong/p/12076510.html