原始的JS异步提交

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年6月25日 星期二

                         原始的JS异步提交

上传文件不像传递一个ID值或字段值一样可以使用post()、get()提交。那么将要保存一张图片怎么办?

那就要使用到原生的JS异步提交了。既然关系到原生的代码，在我们初学者的印象里，原生的代码都不是很易懂，也不是很简洁。而原生的JS异步提交不一样，相对来说也是很好理解。JS异步提交的异步提交主要分为四个步骤，1.创建对象。2.上传文件。3.对请求做出响应。4.进行读取。

下面是上传文件的代码：

 <button class="btn btn-primary btn-sm" type="button" onclick="openUpAttachmentFile()">添加附件</button>

    <input type="file" name="file" id="getAttachmentFile" class="form-control" onchange="upAttachmentFile()" />

</div>

注意 ：上传文件的链接不能用button按钮标签来代开，要在input标签的type="file"中写上改变事件来打开。

1.4 打开 选择附件的文本框

    function openUpAttachmentFile() {

        $("#getAttachmentFile").click();

    }

在获取选择的文件时，不是用val（“files”）：而是用prop(“files”);

var files = $(’#getAttachmentFile’).prop(“files”);

一般我们在上传文件的大小都不会超过20M，所以要给它加个限制（files[0].size <= 20 * 1024 * 1024）。各种判断完成之后就可以进行原生的异步提交了。

function upAttachmentFile()
 {

        //获取选择的文件

        var files = $('#getAttachmentFile').prop("files");

       if (files.length > 0) { 

//判断

            //判断文件大小--文件限制20M

            if (files[0].size <= 20 * 1024 * 1024) {

                //====开始文件上传--使用XMLHttpRequest

                //=new一个FormData对象

                var fd = new FormData();

                //=将第一个文件放入FormData

                fd.append("attachmentFile", files[0]);

                //=new一个XMLHttpRequest对象

                var xhr = new XMLHttpRequest();

                //=注册监听事件

                //发送成功事件

                xhr.onload = function (event) {

                   
  layer.close(layerIndex);//关闭加载层

                    var strText =
  event.currentTarget.responseText;

                    if (strText == "true") {

                        //刷新附件列表

                        tabFilesRefresh();//该页面的刷新函数

                        layer.alert("上传成功！", { icon: 1 });

                    } else {

                       
 layer.alert(strText, { icon: 2 });

                    }

                };

                //上传失败事件

                xhr.onerror = function (event) {

                    layer.close(layerIndex);//关闭加载层

                    layer.alert("上传失败！", { icon: 2 });

                }; //上传进度---会不断被调用

                xhr.upload.onprogress = function (event) {

                    if
 (event.lengthComputable) {

                        // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0

                       
   console.log(event.total + "--->" + event.loaded + "----->" + (event.loaded / event.total * 100) + "%");

                    }

                }; //上传文件一定要用POST方式提交     

                xhr.open("POST", "/SystemManagements/IssuanceNotice/UploadAttachment");

                //打开加载层

                layerIndex = layer.msg('上传中...', {

                    icon: 16,

                    time: 0,

                    shade: 0.3

                });

                //发送数据

                xhr.send(fd);



          //清除掉目前的值，避免无法连续上传相同文件的问题（onchange事件的原因）

                $('#getAttachmentFile').val("")

            } else {

                layer.alert("文件大小不能超过20M", { icon: 0 });

            }

        } else {

            layer.alert("请选择要上的文件", { icon: 0 });

        }

    }

还有个重点：上传文件一定要用POST方式提交。