HTML5文件拖拽上传记录 

  1 JS文件：
  2 var FileName = "";
  3 var FileStr = "";
  4 (function () {
  5     function $id(id) {
  6         return document.getElementById(id);
  7     }
  8     function Output(msg) {
  9         var m = $id("filedrag");
 10         m.innerHTML = msg + m.innerHTML;
 11     }
 12     function FileDragHover(e) {
 13         e.stopPropagation();
 14         e.preventDefault();
 15         e.target.className = (e.type == "dragover" ? "hover" : "");
 16     }
 17     function FileSelectHandler(e) {
 18         FileDragHover(e);
 19         var files = e.target.files || e.dataTransfer.files;
 20         for (var i = 0, f; f = files[i]; i++) {
 21             ParseFile(f);
 22             UploadFile(f); //暂时注释
 23         }
 24     }
 25     function ParseFile(file) {
 26 
 27         //pic类型
 28         if (file.type.indexOf("image") == 0) {
 29             var reader = new FileReader();
 30             reader.onload = function (e) {
 31                 Output(
 32                     "<p><strong>" + file.name + ":</strong><br />" +
 33                     '<img src="' + e.target.result + '" /></p>'
 34                 );
 35                 FileStr=e.target.result;
 36             }
 37             reader.readAsDataURL(file);
 38         }
 39         //文本类型处理
 40         if (file.type.indexOf("text") == 0) {
 41             var reader = new FileReader();
 42             reader.onload = function (e) {
 43                 Output(
 44                     "<p><strong>" + file.name + ":</strong></p><pre>" +
 45                     e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
 46                     "</pre>"
 47                 );
 48             }
 49             reader.readAsText(file);
 50         }
 51     }
 52     function uploadProgress(evt) {
 53         if (evt.lengthComputable) {
 54             var percentComplete = Math.round(evt.loaded * 100 / evt.total);
 55             document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
 56         }
 57         else {
 58             document.getElementById('progressNumber').innerHTML = '';
 59         }
 60     }
 61     function UploadFile(file) {
 62         $id("filedrag").innerHTML = ""; //清空当前fileDrg的信息
 63         if (location.host.indexOf("sitepointstatic") >= 0) return
 64         var xhr = new XMLHttpRequest();
 65         if (xhr.upload && file.size <= $id("sizebyte").value && file.type == "image/jpeg") {
 66             var o = $id("progress");
 67             var progress = o.appendChild(document.createElement("p"));
 68 //            progress.appendChild(document.createTextNode("名称： " + file.name));
 69 //                        xhr.upload.addEventListener("progress", function (e) {
 70 //                            var pc = parseInt(100 - (e.loaded / e.total * 100));
 71 //                            progress.style.backgroundPosition = pc + "% 0";
 72 //                        }, true);
 73             xhr.onreadystatechange = function (e) {
 74                 alert(xhr.readyState);
 75                 if (xhr.readyState == 4) {
 76                     progress.className = (xhr.status == 200 ? "success" : "failure");
 77                 }
 78             };
 79             var files = file.name;
 80             FileName=file.name;
 81         }
 82     }
 83     $("#btnUpload").click(function () {
 84                 if ($("#fileselect").val() == "") {
 85                  if(FileStr==""){
 86                     alert("请选择一个图片文件，再点击上传。");
 87                     return;
 88                     }else{
 89                         $.post(
 90                          "SaveServer.ashx",
 91                          {FileStr:FileStr},
 92                           function(data){
 93                             alert("成功");
 94                              $("#fileselect").val("");
 95                           }); 
 96                     }
 97                 }else{ 
 98                 $.post(
 99                          "SaveServer.ashx",
100                          {FileStr:FileStr},
101                           function(data){
102                             alert("成功");
103                              $("#fileselect").val("");
104                              
105                           });
106                 }
107               
108             });
109     function Init() {
110         var hh = this;
111         var fileselect = $id("fileselect"),
112             filedrag = $id("filedrag")/
113             fileselect.addEventListener("change", FileSelectHandler, false);
114            
115         var xhr = new XMLHttpRequest();
116         if (xhr.upload) {
117 
118             filedrag.addEventListener("progress", uploadProgress, false);
119             filedrag.addEventListener("dragover", FileDragHover, false); //如果鼠标移动但停留在同一个控件中，则引发DragOver事件
120             filedrag.addEventListener("dragleave", FileDragHover, false); //如果用户移出一个窗口，则引发DragLeave事件
121             filedrag.addEventListener("drop", FileSelectHandler, false); //完成拖放操作
122             filedrag.style.display = "block";
123             upButton.style.display = "block";
124         } 
125 
126     }
127     if (window.File && window.FileList && window.FileReader) {
128         Init();
129     } else {
130         upButton.style.display = "block";
131         alert("您的浏览器不支持File API");
132     }
133 })();
后台接受页面：
context.Response.ContentType = "text/plain";
            string[] aa = context.Request.Form["FileStr"].Split(',');
            MemoryStream ms = new MemoryStream(Convert.FromBase64String(aa[1]));
            Bitmap b = new Bitmap(ms);
            string serverPath = System.Web.HttpContext.Current.Server.MapPath("~");

            string toFilePath = Path.Combine(serverPath, @"images\headimg\");
            string pach = toFilePath + GetImageName() + ".jpg";
            b.Save(pach);
            context.Response.Write("yes");
            context.Response.End();

 

posted @ 2013-11-20 09:25  xyzhuzhou  阅读(448)  评论(0)    收藏  举报