math emp target onload xls line 发生 formats push
现在工作中使用的文件上传插件是以前的同事使用Flash实现的,最近经常接到客户的反馈说上传插件不能使用,经调查发现是部份客户的浏览器阻止了Flash的运行,需要手动开启Flash才能正常使用,客户体验非常糟糕,毕竟不可能要求每个客户都知道怎么去开启浏览器支持Flash。
思量过后决定把Flash上传修改为JQuery上传。
上代码:
- ; (function ($, window, document, undefined) {
- var fileExtentionAcceptConfig = [
- { extention: ".3gpp", accept: "audio/3gpp" },
- { extention: ".3gpp", accept: "video/3gpp" },
- { extention: ".ac3", accept: "audio/ac3" },
- { extention: ".asf", accept: "allpication/vnd.ms-asf" },
- { extention: ".au", accept: "audio/basic" },
- { extention: ".bmp", accept: "image/bmp" },
- { extention: ".css", accept: "text/css" },
- { extention: ".csv", accept: "text/csv" },
- { extention: ".doc", accept: "application/msword" },
- { extention: ".dot", accept: "application/msword" },
- { extention: ".dtd", accept: "application/xml-dtd" },
- { extention: ".dwg", accept: "image/vnd.dwg" },
- { extention: ".dxf", accept: "image/vnd.dxf" },
- { extention: ".gif", accept: "image/gif" },
- { extention: ".htm", accept: "text/html" },
- { extention: ".html", accept: "text/html" },
- { extention: ".jp2", accept: "image/jp2" },
- { extention: ".jpe", accept: "image/jpeg" },
- { extention: ".jpeg", accept: "image/jpeg" },
- { extention: ".jpg", accept: "image/jpeg" },
- { extention: ".js", accept: "text/javascript" },
- { extention: ".js", accept: "application/javascript" },
- { extention: ".json", accept: "application/json" },
- { extention: ".mp2", accept: "audio/mpeg" },
- { extention: ".mp2", accept: "video/mpeg" },
- { extention: ".mp3", accept: "audio/mpeg" },
- { extention: ".mp4", accept: "audio/mp4" },
- { extention: ".mp4", accept: "video/mp4" },
- { extention: ".mpeg", accept: "video/mpeg" },
- { extention: ".mpg", accept: "video/mpeg" },
- { extention: ".mpp", accept: "application/vnd.ms-project" },
- { extention: ".ogg", accept: "application/ogg" },
- { extention: ".ogg", accept: "audio/ogg" },
- { extention: ".pdf", accept: "application/pdf" },
- { extention: ".png", accept: "image/png" },
- { extention: ".pot", accept: "application/vnd.ms-powerpoint" },
- { extention: ".pps", accept: "application/vnd.ms-powerpoint" },
- { extention: ".ppt", accept: "application/vnd.ms-powerpoint" },
- { extention: ".rtf", accept: "application/rtf" },
- { extention: ".rtf", accept: "text/rtf" },
- { extention: ".svf", accept: "image/vnd.svf" },
- { extention: ".tif", accept: "image/tiff" },
- { extention: ".tiff", accept: "image/tiff" },
- { extention: ".txt", accept: "text/plain" },
- { extention: ".wdb", accept: "application/vnd.ms-works" },
- { extention: ".wps", accept: "application/vnd.ms-works" },
- { extention: ".xhtml", accept: "application/xhtml+xml" },
- { extention: ".xlc", accept: "application/vnd.ms-excel" },
- { extention: ".xlm", accept: "application/vnd.ms-excel" },
- { extention: ".xls", accept: "application/vnd.ms-excel" },
- { extention: ".xlt", accept: "application/vnd.ms-excel" },
- { extention: ".xlw", accept: "application/vnd.ms-excel" },
- { extention: ".xml", accept: "text/xml" },
- { extention: ".xml", accept: "application/xml" },
- { extention: ".zip", accept: "aplication/zip" },
- { extention: ".xlsx", accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }
- ];
- var fileTypeConfig = [
- { id: 1, name: "商品图片", code: "product" },
- { id: 2, name: "PC端装修图片", code: "template" },
- { id: 3, name: "其它图片", code: "other" },
- { id: 4, name: "手机端装修图片", code: "H5Decorating" },
- { id: 5, name: "手机端装修图片", code: "APPDecorating" },
- { id: 6, name: "订单相关图片(退货、换货)", code: "Order" },
- { id: 7, name: "会员营业执照", code: "UserBusinessLicense" },
- { id: 8, name: "会员身份证", code: "UserIDCard" },
- { id: 9, name: "试装会员", code: "TrailUser" },
- { id: 10, name: "建议反馈", code: "Suggest" },
- ];
- var jqueryUpload = function (ele, opt) {
- var $this = this;
- $this.$element = $(ele);
- $this._default = {
- uploadUrl: "/controls/Upload.ashx",
- buttonStyle: {
- "display": "inline-block",
- "background-color": "#EC7B65",
- "color": "white",
- "padding": "4px 10px",
- "border-radius": "2px",
- "cursor": "pointer",
- "font-size": "12px",
- "line-height": "18px"
- },
- offerId: null,//客户ID
- uploadFolderId: null,//文件夹ID
- uploadFolderName: null,//文件夹名称,上传路径=‘uploads/类型code/uploadName‘
- fileType: null,//文件类型1|2|3...
- noThumb: true,//不生成缩略图
- waterMark: null,//是否生成水印
- fileCount: 1,
- maxSize: 1024,//图片最大尺寸,单位KB;默认1M=1024*1024
- allowFileType: null,//支持的文件类型,可为后缀名数组:[‘.jpg‘, ‘.png‘...],也可以是字符串表式一类文件:‘image‘|‘audio‘...
- onError: null,
- onSelected: null,
- onProcess: null,
- onUploaded: null
- };
- $this.option = $.extend({}, $this._default, opt);
- if ($$.isString($this.option.allowFileType)) {
- $this.option.allowFileType = $$.sae(fileExtentionAcceptConfig)
- .findAll(function (x) { return $$.soe(x.accept).startWith($this.option.allowFileType); })
- .select(function (x) { return x.extention; })
- .toArray();
- }
- $this.controlId = $this.generateId();
- $this.initControl();
- }
- jqueryUpload.prototype = {
- resetOption: function (option) {
- var $this = this;
- $this.option = $.extend($this.option, option);
- $this.initControl();
- },
- initControl: function () {
- var $this = this;
- var html = "127 <div id=‘ju-" + $this.controlId + "‘ class=‘ju-container‘>";
- $this.$filecontrolHtml = "129 <input type=‘file‘";
- if ($$.isArray($this.option.allowFileType)) {
- var accepts = $$.sae(fileExtentionAcceptConfig)
- .findAll(function (x) { return $$.tae($this.option.allowFileType).any(function (y) { return $$.compare(x.extention, y, true) == 0 }); })
- .select(function (x) { return x.accept; })
- .distinct()
- .toArray();
- $this.$filecontrolHtml += " accept=‘" + accepts.join(‘,‘) + "‘";
- }
- $this.$filecontrolHtml += " style=‘display:none;‘ />";
- html += "140 <span class=‘ju-upload‘>上传</span>141 </div>";
- $this.$element.html(html);
- $this.$container = $this.$element.find(".ju-container");
- $this.resetInputControl();
- $this.$uploadbutton = $this.$container.find(".ju-upload");
- if ($$.isObject($this.option.buttonStyle)) {
- $this.$uploadbutton.css($this.option.buttonStyle);
- $this.$uploadbutton.hover(function () {
- $this.$uploadbutton.css({
- "background-color": "#EF8E7C"
- });
- }, function () {
- $this.$uploadbutton.css({
- "background-color": "#EC7B65"
- });
- });
- } else {
- $this.$uploadbutton.addClass($this.option.buttonStyle);
- }
- $this.$uploadbutton.click(function () {
- $this.$filecontrol.click();
- });
- },
- resetInputControl: function () {
- var $this = this;
- if (!$$.isNullOrUndefined($this.$filecontrol)) {
- $this.$filecontrol.remove();
- }
- $this.$container.append($this.$filecontrolHtml);
- $this.$filecontrol = $this.$container.find("input[type=‘file‘]");
- $this.$filecontrol.change(function () {
- $this.fileSelected();
- });
- },
- fileSelected: function () {
- var $this = this;
- var file = $this.$filecontrol[0].files[0];
- if ($$.isArray($this.option.allowFileType)) {
- var fileExtention = $$.getFileExtention(file.name);
- if (!$$.sae($this.option.allowFileType).any(function (x) { return $$.compare(x, fileExtention, true) == 0; })) {
- $this.error("不支持的文件类型!");
- return;
- }
- }
- if (file.size > $this.option.maxSize * 1024) {
- $this.error("文件大小不得超过" + ($this.option.maxSize >= 1024 ? $$.soe($this.option.maxSize / 1024).round(2, $$.enum.roundType.floor) + "MB" : $this.option.maxSize + "KB"));
- return;
- }
- if ($$.isFunction($this.option.onSelected)) {
- var reader = new FileReader();
- reader.onload = function (e) {
- var $img = $("<img />");
- //$img.attr("src", e.target.result);
- //$img.attr("data-url", window.URL.createObjectURL(file));
- var imageUrl = window.URL.createObjectURL(file);
- $img.attr("src", imageUrl).css("cursor", "pointer");
- $this.option.onSelected($img);
- $img.click(function () {
- window.open(imageUrl);
- });
- }
- reader.readAsDataURL(file);
- }
- $this.upload(file);
- },
- error: function (msg) {
- var $this = this;
- if ($$.isFunction($this.option.onError)) {
- $this.option.onError(msg);
- }
- $this.resetInputControl();
- },
- process: function (evt) {
- var $this = this;
- if ($$.isFunction($this.option.onProcess)) {
- $this.option.onProcess(evt.total, evt.loaded);
- }
- },
- upload: function (file) {
- var $this = this;
- var formData = new FormData();
- formData.append("file", file);
- $.xtcShowLoading("上传中。。。");
- try {
- var params = [];
- if (!$$.isNullOrUndefined($this.option.offerId)) {
- params.push("offerid=" + $this.option.offerId);
- if ($$.soe($this.option.offerId).toInt() > 0) {
- params.push("isoffer=1");
- }
- }
- if (!$$.isNullOrUndefined($this.option.uploadFolderId)) {
- params.push("cid=" + $this.option.uploadFolderId);
- }
- var uploadDir = "uploads";
- var fileType = null;
- if (!$$.isNullOrUndefined($this.option.fileType)) {
- var fileTypeId = $$.soe($this.option.fileType).toInt();
- params.push("type=" + fileTypeId);
- var fileType = $$.sae(fileTypeConfig)
- .firstOrDefault(function (x) { return x.id == fileTypeId; });
- }
- if (fileType != null) {
- uploadDir += "/" + fileType.code;
- } else {
- uploadDir += "/unknown";
- }
- if (!$$.isNullOrWhiteSpace($this.option.uploadFolderName)) {
- uploadDir += "/" + $this.option.uploadFolderName;
- }
- params.push("upload_dir=" + uploadDir);
- if (!$$.isNullOrUndefined($this.option.noThumb)) {
- params.push("no_thumb=" + ($this.option.noThumb ? 1 : 0));
- }
- if (!$$.isNullOrUndefined($this.option.waterMark)) {
- params.push("WaterMark=" + ($this.option.waterMark ? 1 : 0));
- }
- $.ajax({
- url: $this.option.uploadUrl + "?" + params.join(‘&‘),
- type: "POST",
- data: formData,
- contentType: false,
- processData: false,
- dataType: "html",
- xhr: function () {
- var xhr = $.ajaxSettings.xhr();
- xhr.upload.addEventListener("progress", function (evt) { $this.process(evt); }, false);
- return xhr;
- }
- }).done(function (data) {
- if ($$.isNullOrUndefined(data)) {
- $this.error("上传失败,未知错误!");
- } else if (data.indexOf(".") <= 0) {
- $this.error(data);
- } else if ($$.isFunction($this.option.onUploaded)) {
- $this.option.onUploaded(data)
- $this.resetInputControl();
- }
- }).fail(function (err) {
- if (typeof (err) == "object" && err.constructor == Object && err.responseText) {
- $this.error(err.responseText);
- } else {
- $this.error(err);
- }
- }).always(function () {
- $.xtcHideLoading();
- });
- }
- catch (err) {
- $.xtcHideLoading();
- }
- },
- generateId: function () {
- var guid = "";
- for (var i = 1; i <= 32; i++) {
- var n = Math.floor(Math.random() * 16.0).toString(16);
- guid += n;
- if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
- guid += "-";
- }
- return guid;
- }
- }
- $.fn.xtcUpload = function (option) {
- return new jqueryUpload(this, option);
- }
- })(jQuery, window, document);
如何使用?
- <script type="text/javascript" src="/common_script/jsExtension.js?t=201708231435"></script><!--使用了上一篇随笔里编写的JS扩展插件,需要引入-->
- <script type="text/javascript" src="/common_script/jqueryUpload.js"></script>
- <script type="text/javascript">
- $(function () {
- var uploadControl = $(".uploadTest").xtcUpload({
- buttonStyle: "upload-button",//按钮样式,可以是一个css键值对实体,也可以是一个class名称
- uploadFolderId: 220,//上传文件夹ID
- uploadFolderName: ‘10月20日活动页‘,//上传文件夹名称
- fileType: 3,//文件类型,对应于JS文件中的fileTypeConfig
- maxSize: 500,//文件大小限制单位KB
- allowFileType: [".png", ".jpg"],//支持的文件类型,可为后缀名数组:[‘.jpg‘, ‘.png‘...],也可以是字符串表式一类文件:‘image‘|‘audio‘...
- //发生错误时调用的函数
- onError: function (msg) {
- Ecshop.Tool.Hint.Error({ info: msg });
- },
- //上传时进度条触发事件
- onProcess: function (total, loaded) {
- //百分比 loaded / total * 100
- },
- //上传完成时触发事件
- onUploaded: function (file) {
- $(".img-before-upload").append("<img src=‘/" + file + "‘ />");
- }
- });
- //当需要时(如上传文件夹变更)重置上传控件参数
- uploadControl.resetOption({
- uploadFolderId: 221
- });
- });
- </script>
- <div class="uploadTest"></div>
- <div class="img-before-upload"></div>
JQuery上传文件(客户端)
来源: http://www.bubuko.com/infodetail-2343242.html