.NET中的FileUpload控件的使用-原生JS(二)

本篇使用原生JS进行数据传输，使用FileUpload控件上传文件，适配IE。

HTML

<div class="container">
        <div class="row">
            <input type="file" formenctype="multipart/form-data" id="files" multiple name="files" /><button class="btn-default" id="UploadButton">点我上传</button>
        </div>
    </div>

 

JS

 <script type="text/javascript">
        var fileData = new FormData();
        fileData.enctype = "multipart/form-data";//给定数据传输格式
        window.onload = function () {
            document.getElementById("UploadButton").onclick = function () {
                debugger;
                fileData.append("subject", "哈哈哈");
                fileData.append("remark", "12366");
                var files = document.getElementById("files").files;
                if (files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }
                }
                //var filedata = json.stringify(data);
                SpadesQ({
                    url: '/IENotes/Create',
                    method: 'POST',
                    async: false,
                   contentType: false,
                     processData: false,
                     data: fileData,
                success: function (result) {
                    alert(result);
                },
                error: function (error) {
                    alert(error);
                }
            });
            }
        }
  </script>
用原生JS封装了一个简易的Ajax
/*封装Ajax函数
 @param {string} opt.type http 连接的方式 包括POST、GET
 @param {string} opt.url  请求的地址
 @param {boolean} async  是否异步
 @param {object} otp.data 请求发出的数据
 @param {boolean} otp.contentType 传输中的数据格式
 @param {boolean} otp.processData 是否将数据序列化
 @param {function} success 请求成功后的回调
 @param {function} error 出错后的回调
*/
function SpadesQ(opt) {
    debugger;
    opt = opt || {};
    opt.method = (opt.method || 'GET').toUpperCase();
    opt.url = opt.url || '';
    opt.async = opt.async || false;
    opt.contentType = opt.contentType || false; //contentType设为false，不修对象改格式
    opt.processData = opt.processData || false;//不对数据对象做序列化操作
    opt.data = opt.data ||{};
    opt.success = opt.success || function () { };
    opt.error = opt.error || function () { };
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest;
    } else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);//因为此处是为了完整的将FormData对象传送至到action中，所以没有对数据做任何改变，有需要对数据格式进行处理的另当别论。
        //xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charest=utf-8');
        xmlHttp.send(opt.data);
    } else if(opt.method.toUpperCase()==='GET') {
        xmlHttp.open(opt.method, opt.url + '?' + opt.data, opt.async);
        xmlHttp.send();
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
            opt.success(xmlHttp.responseText);
        } else {
            opt.error(xmlHttp.responseText);
        }
    };
}

 

后台逻辑

public static bool CommonFile(){
 var  files = Request.Files.AllKeys.Distinct(); //将传输过来的files进行去重
                if (files != null)
                {
                    foreach (string each in files)
                    {
                        HttpPostedFileBase file = Request.Files[each] as HttpPostedFileBase; //注意，这里有一个对象类型转换的过程，需要将传过来的对象转换成HttpPostedFileBase对象
                        if (file != null)
                        {
                            var InputFileName = Path.GetFileName(file.FileName);
                            string str4 = AppDomain.CurrentDomain.BaseDirectory;    //获取基目录，它由程序集冲突解决程序用来探测程序集。
                            var ServerSavePath = Path.Combine(Server.MapPath("~/Uploads/") );
                            if (!Directory.Exists(ServerSavePath))//检查路径是否存在
                            {
                                Directory.CreateDirectory(ServerSavePath);
                            }
                            var SavePath = Path.Combine(ServerSavePath ,InputFileName);
                            file.SaveAs(SavePath);
                        }
                    }
                    return true;
                }
                else
                {
                    return false;
                }
}

 

点我

感谢您的观看，您的👍是对我最大的支持！