封装图片上传插件（用到html5技术）
来源：互联网 发布：ipad绿色上网软件 编辑：程序博客网 时间：2024/05/22 04:39
//js:function ie6scroll(box, h, wbox_h) { var box = box;//弹窗的div,例如.class/#id window.onscroll = function () { scrollT = $(document).scrollTop();//获取滚动条高度 var top = (h - wbox_h) / 2 + scrollT; $(box).css("top", top + "px"); }}function wbox(box) { var box = $(box);//弹窗的div,例如.class/#id var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//浏览器窗口宽度 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//浏览器窗口高度 var aw = document.body.scrollWidth;//网页正文宽度 var ah = document.body.scrollHeight;//网页正文高度 var scrollT = $(document).scrollTop();//获取滚动条高度 var wbox_w = $(box).innerWidth();//弹出框宽度 var wbox_h = $(box).innerHeight();//弹出框高度 var bg_w = w; var bg_h = h; var left = (w - wbox_w) / 2; var top = (h - wbox_h) / 2 + scrollT; if (ah > h) { bg_w = aw; bg_h = ah; } $(".wbox").css({ "top": top + "px", "left": left + "px" }); $(".wbox_bg").css({ "display": "block", "width": bg_w + "px", "height": bg_h + "px" }); $(box).css("display", "block"); ie6scroll(box, h, wbox_h);}function boxClose(box) { var box = box;//弹窗的div,例如.class/#id $(".wbox_bg").css("display", "none"); $(box).css("display", "none");}var FileUpload_Config = { RequestUrl: "/Home/UploadFile", ParamName: "file", ProgressWidth: 400, ProgressHeight: 50, ProgressZIndex: 9999, FileFormat: ["png", "jpeg", "jpg", "gif", "mp4"], FileMaxSize: 10, ImgCompressionEnable: true, ProcessBackgroundImage: "./js/lib/FileUpload/bak.png", ProgressImage: "./js/lib/FileUpload/pro.png", OtherParams:{}, beforeStart: function () { }, onStart: function () { }, onComplete: function (responseText) { }, onSuccess: function () { }, onFailed: function (responseText) { }, onError: function () { }};var FileUpload = { Init: function (cfg) { if (cfg.id) { var btn = document.getElementById(cfg.id); if (btn.attachEvent) btn.attachEvent('onclick', FileUpload.GoUpload); else btn.addEventListener('click', FileUpload.GoUpload); } FileUpload_Config.RequestUrl = cfg.RequestUrl || FileUpload_Config.RequestUrl; FileUpload_Config.ParamName = cfg.ParamName || FileUpload_Config.ParamName; FileUpload_Config.ProgressWidth = cfg.ProgressHeight || FileUpload_Config.ProgressWidth; FileUpload_Config.ProgressHeight = cfg.ProgressHeight || FileUpload_Config.ProgressHeight; FileUpload_Config.ProgressZIndex = cfg.ProgressZIndex || FileUpload_Config.ProgressZIndex; FileUpload_Config.FileFormat = cfg.FileFormat || FileUpload_Config.FileFormat; FileUpload_Config.FileMaxSize = cfg.FileMaxSize || FileUpload_Config.FileMaxSize; FileUpload_Config.ImgCompressionEnable = cfg.ImgCompressionEnable || FileUpload_Config.ImgCompressionEnable; FileUpload_Config.ProcessBackgroundImage = cfg.ProcessBackgroundImage || FileUpload_Config.ProcessBackgroundImage; FileUpload_Config.ProgressImage = cfg.ProgressImage || FileUpload_Config.ProgressImage; FileUpload_Config.OtherParams = cfg.OtherParams || FileUpload_Config.OtherParams; FileUpload_Config.beforeStart = cfg.beforeStart || FileUpload_Config.beforeStart; FileUpload_Config.onStart = cfg.onStart || FileUpload_Config.onStart; FileUpload_Config.onComplete = cfg.onComplete || FileUpload_Config.onComplete; FileUpload_Config.onSuccess = cfg.onSuccess || FileUpload_Config.onSuccess; FileUpload_Config.onFailed = cfg.onFailed || FileUpload_Config.onFailed; FileUpload_Config.onError = cfg.onError || FileUpload_Config.onError; if (!document.getElementById('UploadProcess')) { var bakImg = ""; var proImg = ""; if (FileUpload_Config.ProcessBackgroundImage) bakImg = "background-image:url(" + FileUpload_Config.ProcessBackgroundImage + ") ;"; if (FileUpload_Config.ProgressImage) proImg = "background-image:url(" + FileUpload_Config.ProgressImage + ");"; var ProcessPercentTop = FileUpload_Config.ProgressHeight + 1; var ProcessTextTop = FileUpload_Config.ProgressHeight * -1; var margin = (FileUpload_Config.ProgressHeight * -1) + " 0 0 " + (FileUpload_Config.ProgressWidth / 2 * -1); var htmlstr = "<div class=\"wbox_bg\" style=\"display:none;\"></div>" + "<div id=\"UploadBox\" class=\"wbox wbox0\">" + "<div class=\"wbox_content\">" + "<div id=\"UploadBoxContent\" class=\"wbox_c\"></div>" + "</div>" + "</div>"; $(htmlstr).appendTo($(document.body)); htmlstr = "<div id=\"UploadProcess\" style=\"z-index:" + (FileUpload_Config.ProgressZIndex +100)+ "\">" + "<div id=\"ProcessPercent\" style=\"position:relative;top:" + (ProcessPercentTop - 1) + "px;left:0px;width:1px;height:" + FileUpload_Config.ProgressHeight + "px;display:none;" + proImg + "z-index:" + (FileUpload_Config.ProgressZIndex + 102) + "\"></div>" + "<div id=\"ProcessBackground\" style=\"position:relative;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;" + bakImg + "z-index:" + (FileUpload_Config.ProgressZIndex + 101) + "\"></div>" + "<div id=\"ProcessText\" style=\"position:relative;top:" + ProcessTextTop + "px;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;text-align:center;font-family:微软雅黑;line-height:" + FileUpload_Config.ProgressHeight + "px;z-index:" + (FileUpload_Config.ProgressZIndex + 103) + "\">0%</div>" + "</div>"; if (!FileUpload_Config.ProcessBackgroundImage || !FileUpload_Config.ProgressImage) htmlstr = "<div id=\"UploadProcess\" style=\"position:absolute;top:50%;left:50%;margin:" + margin + ";z-index:" + FileUpload_Config.ProgressZIndex + "\">" + "<div id=\"ProcessPercent\" style=\"position:relative;top:" + ProcessPercentTop + "px;left:1px;width:1px;height:" + FileUpload_Config.ProgressHeight + "px;background-color:#ea5504;display:none;z-index:" + FileUpload_Config.ProgressZIndex + 2 + "\"></div>" + "<div id=\"ProcessBackground\" style=\"position:relative;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;border:solid 1px #ea5504;z-index:" + FileUpload_Config.ProgressZIndex + 1 + "\"></div>" + "<div id=\"ProcessText\" style=\"position:relative;top:" + ProcessTextTop + "px;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;text-align:center;valign:middle;line-height:" + FileUpload_Config.ProgressHeight + "px;z-index:" + FileUpload_Config.ProgressZIndex + 3 + "\">0%</div>" + "</div>"; $(htmlstr).appendTo($('#UploadBoxContent')); if (!document.getElementById('UploadStatus')) { var statusStr = "<div id=\"UploadStatus\" style=\"display:none\">0</div>"; $(statusStr).appendTo($(document.body)); } } }, UpdateProcess: function (percent) { if (percent == 100) percent = 100; if (document.getElementById("UploadBox").style.display != "block") wbox("#UploadBox"); if (document.getElementById('ProcessPercent').style.display == "none") document.getElementById('ProcessPercent').style.display = "block"; document.getElementById('ProcessText').innerHTML = "正在上传 " + percent + "%"; var totalWidth = FileUpload_Config.ProgressWidth; var currWidth = parseInt(percent / 100 * totalWidth); document.getElementById('ProcessPercent').style.width = currWidth + "px"; }, UploadFile: function (file) { if (!file) file = document.getElementById('FileUpload_InputFile').files[0]; if (FileUpload_Config.ImgCompressionEnable) { var cvs = document.createElement('canvas'); var img = new Image; img.src = FileUpload.getObjectURL(file); img.onload = function () { var img2 = new Image; cvs.width = img.naturalWidth; cvs.height = img.naturalHeight; var ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); file = cvs.toDataURL("image/png"); } } var arr = file.name.split('.'); if (FileUpload_Config.FileFormat.indexOf(arr[arr.length - 1].toLowerCase()) == -1) { alert("文件格式不正确"); return; } if (file.size > FileUpload_Config.FileMaxSize * 1024 * 1024) { alert("文件大小不能超过" + FileUpload_Config.FileMaxSize + "M"); return; } FileUpload.UpdateProcess(0); (function (file) { var xhr = new XMLHttpRequest(); if (xhr.upload) { // 上传中 xhr.upload.addEventListener("progress", function (e) { if ($('#UploadStatus').html() != "1") { return; } FileUpload.ShowProgress(e.loaded, e.total); }, false); // 文件上传成功或是失败 xhr.onreadystatechange = function (e) { switch (xhr.readyState) { case 4: if (xhr.status == 200) { FileUpload.ClearFile(); FileUpload_Config.onComplete(xhr.responseText); var data = JSON.parse(xhr.responseText); $('#UploadStatus').html("0"); FileUpload.ShowResult(data.result, data); } else { FileUpload.ClearFile(); $('#UploadStatus').html("0"); FileUpload.ShowResult(false, xhr.responseText); } break; case 1: FileUpload_Config.onStart(); break; case 0: FileUpload_Config.beforeStart(); break; default: break; } }; var fd = new FormData(); fd.append(FileUpload_Config.ParamName, file); for (var p in FileUpload_Config.OtherParams) { fd.append(p, FileUpload_Config.OtherParams[p]); } // 开始上传 xhr.open("POST", FileUpload_Config.RequestUrl, true); //xhr.setRequestHeader("Content-Type", "multipart/form-data;"); //xhr.overrideMimeType("application/octet-stream"); //xhr.setRequestHeader("filename", file.name); xhr.send(fd); $('#UploadStatus').html("1"); // xhr.send(file); } })(file); }, UploadFileMultiple: function (files) { if (!files) files = document.getElementById('FileUpload_InputFile').files; for (var i=0;i<files.length;i++) { var file = files[i]; var arr = file.name.split('.'); if (FileUpload_Config.FileFormat.indexOf(arr[arr.length - 1].toLowerCase()) == -1) { alert("包含格式不正确的文件"); return; } if (file.size > FileUpload_Config.FileMaxSize * 1024 * 1024) { alert("单个文件大小不能超过" + FileUpload_Config.FileMaxSize + "M"); return; } } FileUpload.UpdateProcess(0); (function (files) { var xhr = new XMLHttpRequest(); if (xhr.upload) { // 上传中 xhr.upload.addEventListener("progress", function (e) { if ($('#UploadStatus').html() != "1") { return; } FileUpload.ShowProgress(e.loaded, e.total); }, false); // 文件上传成功或是失败 xhr.onreadystatechange = function (e) { switch (xhr.readyState) { case 4: if (xhr.status == 200) { FileUpload.ClearFile(); FileUpload_Config.onComplete(xhr.responseText); var data = JSON.parse(xhr.responseText); $('#UploadStatus').html("0"); FileUpload.ShowResult(data.result, data); } else { FileUpload.ClearFile(); $('#UploadStatus').html("0"); FileUpload.ShowResult(false, xhr.responseText); } break; case 1: FileUpload_Config.onStart(); break; case 0: FileUpload_Config.beforeStart(); break; default: break; } }; var fd = new FormData(); for (var j = 0; j < files.length; j++) { fd.append(FileUpload_Config.ParamName+j.toString(), files[j]); } for (var p in FileUpload_Config.OtherParams) { fd.append(p, FileUpload_Config.OtherParams[p]); } // 开始上传 xhr.open("POST", FileUpload_Config.RequestUrl, true); //xhr.setRequestHeader("Content-Type", "multipart/form-data;"); //xhr.overrideMimeType("application/octet-stream"); //xhr.setRequestHeader("filename", file.name); xhr.send(fd); $('#UploadStatus').html("1"); // xhr.send(file); } })(files); }, ShowProgress: function (loaded, total) { //var eleProgress = _this.find('#' + file.index + 'file .progress'); var percent = (loaded / total * 100).toFixed(2); FileUpload.UpdateProcess(percent); //SetProgress(percent); //drawProcess(parseInt(percent)); // eleProgress.find('.progressbar').css('width',percent); // if(total-loaded<500000){loaded = total;}//解决四舍五入误差 // eleProgress.parents('li').find('.progressnum').html(formatFileSize(loaded)+'/'+formatFileSize(total)); }, GoUpload: function () { if (!document.getElementById('UploadStatus')) { var statusStr = "<div id=\"UploadStatus\" style=\"display:none\">0</div>"; $(statusStr).appendTo($(document.body)); } if ($('#UploadStatus').html() != "0") return; if (!document.getElementById('FileUpload_InputFile')) $("<div style=\"display:none\"><input id=\"FileUpload_InputFile\" type=\"file\" onchange=\"FileUpload.UploadFile()\"/></div>").appendTo($(document.body)); document.getElementById('FileUpload_InputFile').click(); }, ClearFile: function () { var obj = document.getElementById('FileUpload_InputFile'); if (obj) obj.outerHTML = obj.outerHTML; }, ShowResult: function (res, data) { boxClose('#UploadBox'); $('#UploadStatus').html("0"); if (res) { $('#ProcessText').html("上传成功"); FileUpload_Config.onSuccess(data); } else { $('#ProcessText').html("上传失败"); FileUpload_Config.onFailed(data); } }, ImageCompression: function (file) { //var srcJ = new Array();//定义三变量用于装载参数 //var srcI = new Array(); //var srcIName = new Array();//同步装载上传图片的name //var srcIGif = new Array(); var imgInfoCp = function () { this.name = ""; this.size = 204800; }; var getObjectURL = function (file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }; var minCpmpSize = 153600;//约为150kB,当上传图片size比此小时就不用压缩 //var j = 0; //var k = j; var cout = ""; //srcI[j] = getObjectURL(file); var imgageUrl = getObjectURL(file); var imageInfoCp = new imgInfoCp(); imageInfoCp.name = file.name; imageInfoCp.type = file.type; imageInfoCp.size = file.size; //图片时fig时使用fileReader 不压缩 if (file.type == 'image/gif') { var fileRead = new FileReader(file); fileRead.onload = function (event) { //srcJ[k] = event.target.result; imgageUrl = event.target.result; }; fileRead.readAsDataURL(file);// } var img = new image; img.src = imgageUrl; //srcIName.push(imageInfoCp); //var imageUrl; //imageUrl = srcI[j]; //var srcTemp_j = new Array; //srcTemp_j[i] = new Image; //srcTemp_j[i].src = srcI[k + i]; //srcTemp_j[i].onload = function () { // var cvs = document.createElement('canvas'); // var img = new Image; img.src = srcI[k]; // cvs.width = img.naturalWidth; // cvs.height = img.naturalHeight; // var ctx = cvs.getContext('2d'); // ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // if (srcIName[k].size > minCpmpSize) { // if (srcIName[k].type == 'image/png') // srcJ[k] = cvs.toDataURL('image/png', 0.6); // else if (srcIName[k].type == 'image/gif'); // else if (srcIName[k].type == 'image/jpeg') srcJ[k] = cvs.toDataURL('image/jpeg', 0.6); // else srcJ[k] = cvs.toDataURL(srcIName[k].type, 0.6); // } else { // if (srcIName[k].type == 'image/png') // srcJ[k] = cvs.toDataURL('image/png', 0.9); // else if (srcIName[k].type == 'image/gif'); // else if (srcIName[k].type == 'image/jpeg') srcJ[k] = cvs.toDataURL('image/jpeg', 0.9); // else srcJ[k] = cvs.toDataURL(srcIName[k].type, 0.9); // } // $.jsonpGet({ // url: "/BuildingInfo/UploadBuildingBanner", // data: { BuildId: bmess.BuildingId, Filename: srcIName[k].name, ImageData: srcJ[k] }, // async: false, // callbackName: "UploadBuildingBanner", // fun: function (e) { // $("#ImagePath").attr("src", e.data[0].ImagePath); // window.localStorage.setItem("ImagePath", e.data[0].ImagePath) // console.log(bmess.imagePath); // }, // error: function (data) { // $.tipalart({ // content: data.msg // }); // } // }); //} }, getObjectURL: function (file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }, UploadFileAsString: function (mothed, url, params) { var percent=0; var timer = setInterval(function () { if (percent >= 99) { clearInterval(timer); return; } percent++; FileUpload.UpdateProcess(percent); }, 1000); var request = new XMLHttpRequest(); request.onreadystatechange = function () { switch (request.readyState) { case 4: clearInterval(timer); percent = 100; FileUpload.UpdateProcess(percent); if (request.status == 200) { var data = JSON.parse(request.responseText); if (data.result) FileUpload.ShowResult(true, data.data); else FileUpload.ShowResult(false, data); } else FileUpload.ShowResult(false, request.responseText); break; default: break; } }; //url+="?"; //for(var p in params){ // url+=p+"="+params[p]+"&"; //} //url=url.substring(0,url.length); request.open(mothed, url, true); request.send(JSON.stringify(params)); }};
//css
.FileUpload_Center {margin: 50px auto;width: 400px;} .FileUpload_loading {width: 397px;height: 49px;background: url(./Image/bak.png) no-repeat;} .FileUpload_loading div {width: 0px;height: 48px;background: url(./Image/pro.png) no-repeat;color: #fff;text-align: center;font-family: Tahoma;font-size: 18px;line-height: 48px;} .FileUpload_message {width: 200px;height: 35px;font-family: Tahoma;font-size: 12px;background-color: #d8e7f0;border: 1px solid #187CBE;display: none;line-height: 35px;text-align: center;margin-bottom: 10px;margin-left: 50px;} .wbox_bg{ display:none; z-index:8888; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.3; _height:expression(document.documentElement.clientHeight); _width:expression(document.documentElement.clientWidth);} .wbox{ display:none; z-index:9999; position:absolute; left:50%; top:50%; overflow:hidden;}.wbox_content{ float:left; width:100%;}.wbox_c{ padding:8px;}
0 0
- 封装图片上传插件（用到html5技术）
- HTML5图片上传插件
- HTML5拍照上传图片&Phonegap封装HTML5调用Android相机拍照上传到PHP端
- 如何用HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）
- flex图片上传(封装)
- uploadify多图片上传（html5版本）
- html5预览上传图片
- html5上传图片
- Html5 图片拖放上传
- html5 file上传图片
- html5---图片上传预览
- HTML5图片 拖放上传
- html5 压缩图片上传
- html5上传本地图片
- Html5 上传图片预览
- HTML5上传图片预览
- html5 上传图片实践
- html5图片上传【文件上传】
- 【Mybatis】---mybatis+mysql+ IntelliJ IDEA框架搭建+实例讲解
- 让ubuntu的man命令支持中文
- javascript自学笔记-第一篇
- 由于ls可在‘/bin’处找到,由于/bin不在PATH环境变量中,故无法找到该命令
- 项目成本管理 教材精选
- 封装图片上传插件（用到html5技术）
- nginx 源码阅读（2）
- 第六届蓝桥杯JavaA组第一题
- 算法笔记_028-字符串转换成整数（Java）
- 单片机DS18b20 温度检测液晶显示
- 使用IDA调试Android原生程序中遇到的问题及解决方法
- Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6
- C++ Primer课后练习12.2
- Dropout资源【2】
