.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", "");
                 var files = document.getElementById("files").files;
                 if (files.length > ) {
                     for (var i = ; 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 ==  && xmlHttp.readyState == ) {
             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;
                 }
 }

点我

感谢您的观看，您的