ASPNET AJAX上传文件-非form提交的坑之一

ASPNET AJAX上传文件-非form提交的坑之一

在网上找来一些大佬的例子参考，一通修改后，逻辑基本通过，但是提交时，发现FileUpload的控件值一直获取不到，wk，郁闷

 var file1 = document.getElementById("file1");
var data=file1.files[0];
 
            //1.创建异步对象（小浏览器）  
            var req = new XMLHttpRequest();
            //2.设置参数           
            req.open("post", "Uploadfile/uploadNoneFrmSubmit.ashx", true);
            //3.设置 请求 报文体 的 编码格式（设置为 表单默认编码格式）   
            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // req.setRequestHeader("")          

file1.files[0]无论如何也获取不到值，郁闷，从html控件改成服务器控件，各种验证测试，都不通过，仍然是空值。

后来仔细排查，查资料，发现，mygod ，基础概念问题，ajax和dom定义的很清楚，如一位老兄整理的资料：

$(‘xx’)[0].files[0]是什么意思，

①首先得明白jQuery对象只能使用jQuery对象的属性和方法，JavaScript对象只能使用JavaScript对象的属性和方法；
②files[0]是JavaScript的属性；
③${(}^{\prime }x{x}^{\prime })是jQuery对象，$(‘xx’)[0]是将jQuery对象：${(}^{\prime }x{x}^{\prime })转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法；④我们再看这行代码的背景，HTML5支持multiple属性，即<inputtype="file">可能会添加multiple属性并赋值：multiple="multiple"，即<inputtype="file"multiple="multiple">，这样一次性可同时上传多张图片，所以获得一张图片的方法就是：$(‘xx’)[0].files[0]
⑤扩展：
${(}^{\prime }x{x}^{\prime })[0].files[0].size可获得文件的大小，单位是字节（B），使用$(‘xx’)[0].files[0].size可用于判断文件的大小。
最后：第②点可能描述不准，若发现错误欢迎指正，大家共同进步。

还有补充的：

$(‘xx’)[0].files[0]的意思

Query对象只能使用jQuery对象的属性和方法，JavaScript对象只能使用JavaScript对象的属性和方法；

${(}^{\prime }x{x}^{\prime })是jQuery对象，$(‘xx’)[0]是将jQuery对象："$(‘xx’)"转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法；

HTML5支持multiple属性，即可能会添加multiple属性并赋值：multiple=“multiple”，即，这样一次性可同时上传多张图片，所以获得一张图片的方法就是：$(‘xx’)[0].files[0]

${(}^{\prime }x{x}^{\prime })[0].files[0].size可获得文件的大小，单位是字节（B），使用$(‘xx’)[0].files[0].size可用于判断文件的大小。

多文件上传时，获取每一个文件的大小：

var addImags =$(input的id).prop('files');
var fileSize=0;
for(var i=0;i<addImags.length;i++){
fileSize=$(addImags)[i].size; 
if(fileSize>1048576){
layer.msg("文件过大");
return;
}
}

限制多文件一次上传个数：

var fileList = $(input的id).get(0).files;

if(fileList.length>10){
　　alert("一次最多上传10个文件！");

　　return;

}

IE兼容问题:

<

script type="text/javascript">   
    // 判断是否为IE浏览器： /msie/i.test(navigator.userAgent) 为一个简单正则
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    function fileChange(target){
        var fileSize = 0;
        if (isIE && !target.files) {    // IE浏览器
            var filePath = target.value; // 获得上传文件的绝对路径
            /**
             * ActiveXObject 对象为IE和Opera所兼容的JS对象
             * 用法：
             *         var newObj = new ActiveXObject( servername.typename[, location])
             *         其中newObj是必选项。返回 ActiveXObject对象 的变量名。
             *        servername是必选项。提供该对象的应用程序的名称。
             *        typename是必选项。要创建的对象的类型或类。
             *        location是可选项。创建该对象的网络服务器的名称。
             *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
             *     Scripting.FileSystemObject 为 IIS 内置组件，用于操作磁盘、文件夹或文本文件，
             *    其中返回的 newObj 方法和属性非常的多
             *    如：var file = newObj.CreateTextFile("C:\test.txt", true) 第二个参表示目标文件存在时是否覆盖
             *    file.Write("写入内容");    file.Close();
             */
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
            // GetFile(path) 方法从磁盘获取一个文件并返回。
            var file = fileSystem.GetFile(filePath);
            fileSize = file.Size;    // 文件大小，单位：b
        }
        else {    // 非IE浏览器
            fileSize = target.files[0].size;
        }
        var size = fileSize / 1024 / 1024;
        if (size > 1) {
            alert("附件不能大于1M");
        }
    }
</script>

转载于:https://www.cnblogs.com/yizw/p/7645132.html