zoukankan      html  css  js  c++  java
  • 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"); }
  • 相关阅读:
    openerp学习笔记 模块结构分析
    Odoo文档管理/知识管理应用实践
    POSTGRESQL DEFAULT TEMPLATE0 НА UTF8 ENCODING
    could not execute command lessc odoo
    XPath 元素及属性查找
    pycharm 使用心得(四)显示行号
    mimetypes.py的UnicodeDecodeError
    win7源码运行odoo8.0错误
    xUtils 中的BitmapUtils 全面注释
    Android初级到高级指南(精华版)
  • 原文地址:https://www.cnblogs.com/lizeyan/p/3507686.html
Copyright © 2011-2022 走看看