码迷,mamicode.com
首页 > Web开发 > 详细

文件上传

时间:2019-12-21 15:51:26      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:elb   取值   name   button   err   上传   action   end   desc   

文件上传时需要用到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

文件上传

标签:elb   取值   name   button   err   上传   action   end   desc   

原文地址:https://www.cnblogs.com/yutang-wangweisong/p/12076939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!