• Js 上传文件 页面不刷新


    html控件代码:

                         <form id="form1"> 
                         <p><input type="file" name="mfile" id="mfile" />&nbsp;<input type="button" value="Upload" onclick="Submit();"  /></p> 
                         <p><label id="uploadProgress"></label></p>
                         </form>     

    Javascript代码:

        <script>function Submit() {
                var isTrueExtension = CheckType();
                if (isTrueExtension) {
                    var form = document.getElementById("form1");
                    if (form["mfile"].files.length > 0)
                    {
                        var file = form["mfile"].files[0];
                        var fd = new FormData();
                        //传参数
                        fd.append("afile", file);var xhr = new XMLHttpRequest();
                        xhr.open('POST', 'upload.ashx', true);
    
                        xhr.upload.onprogress = function (e) {
                            if (e.lengthComputable) {
                                var percentComplete = (e.loaded / e.total) * 100;
                                document.getElementById("uploadProgress").innerHTML = percentComplete + "% uploaded";
                                console.log(percentComplete + "% uploaded");
                            }
                        }
                        
                        xhr.onload = function () {
                            //上传完成状态为200
                            if (this.status == 200)
                            {
                                var a = this.response;                            
                            }
                        }
    
                        xhr.send(fd);
                    }
                }
            }
    
            function CheckType() {
                //得到上传文件的值  
                var fileName = $("#mfile").val();
                //返回String对象中子字符串最后出现的位置.  
                var seat = fileName.lastIndexOf(".");
    
                //返回位于String对象中指定位置的子字符串并转换为小写.  
                var extension = fileName.substring(seat).toLowerCase();
                //判断允许上传的文件格式  
    
                var allowed = [".cclx", ".cctx", ".ccl", ".cct"];
                for (var i = 0; i < allowed.length; i++) {
                    if (!(allowed[i] != extension)) {
                        return true;
                    }
                }
                alert("不支持" + extension + "格式");
                return false;
            }
        </script>

    后台upload.ashx处理代码:

            public void ProcessRequest(HttpContext context)
            {
                HttpRequest request = context.Request;
                string _file = request.Files["afile"].FileName;
                request.Files["afile"].SaveAs(_file );
    context.Response.Write("1"); }
  • 相关阅读:
    eclipse快捷键
    iOS音频播放 (二):AudioSession 转
    HNU13377:Book Club(DFS)
    BAPC2014 K&amp;&amp;HUNNU11591:Key to Knowledge(中途相遇法)
    小米净水器与小区过滤价格水对照.xls
    NUTCH2.3 hadoop2.7.1 hbase1.0.1.1 solr5.2.1部署(一)
    hibernate动态表名映射--仅仅有想不到,没有做不到
    【BZOJ 1660】 [Usaco2006 Nov]Bad Hair Day 乱发节
    oracle-企业信息化
    线性查找算法
  • 原文地址:https://www.cnblogs.com/lizeyan/p/3507686.html
Copyright © 2020-2023  润新知