From af50d4ed7475e51131ab7422e684b4ed3d763c18 Mon Sep 17 00:00:00 2001 From: "zheng.wang" Date: Thu, 13 Apr 2017 15:46:01 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix=20IE9=E5=A4=9A=E4=B8=AAFileUpload?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=85=B1=E5=AD=98=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增了组件内部维护的currentIEID 修改了form表单唯一表示的方式 --- src/FileUpload.js | 48 ++++++++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/src/FileUpload.js b/src/FileUpload.js index 7c9b192..b9a2072 100644 --- a/src/FileUpload.js +++ b/src/FileUpload.js @@ -61,6 +61,8 @@ const FileUpload = React.createClass({ style: PT.object, className: PT.string }, + IEFormGroup: [true], + currentIEID: 0, /*根据props更新组件*/ _updateProps(props) { @@ -221,7 +223,7 @@ const FileUpload = React.createClass({ this.chooseFile(files) this.chooseAndUpload && this.commonUpload() }, - + /*执行上传*/ commonUpload() { /*mill参数是当前时刻毫秒数，file第一次进行上传时会添加为file的属性，也可在beforeUpload为其添加，之后同一文件的mill不会更改，作为文件的识别id*/ @@ -385,7 +387,7 @@ const FileUpload = React.createClass({ this.chooseFile(this.fileName) /*先执行IEUpload，配置好action等参数，然后submit*/ this.chooseAndUpload && (this.IEUpload() !== false) && - document.getElementById(`ajax_upload_file_form_${this.IETag}${currentIEID}`).submit() + document.getElementById(`ajax_upload_file_form_${this.IETag}${+this.currentIEID}_${this.props.startIEID}`).submit() e.target.blur() }, /*IE处理上传函数*/ @@ -416,7 +418,7 @@ const FileUpload = React.createClass({ } const targeturl = baseUrl + paramStr - document.getElementById(`ajax_upload_file_form_${this.IETag}${currentIEID}`).setAttribute('action', targeturl) + document.getElementById(`ajax_upload_file_form_${this.IETag}${+this.currentIEID}_${this.props.startIEID}`).setAttribute('action', targeturl) /*IE假的上传进度*/ const getFakeProgress = this.fakeProgress() let loaded = 0, @@ -434,11 +436,11 @@ const FileUpload = React.createClass({ /*当前上传id*/ - const partIEID = currentIEID + const partIEID = +this.currentIEID /*回调函数*/ window.attachEvent ? - document.getElementById(`ajax_upload_file_frame_${this.IETag}${partIEID}`).attachEvent('onload', handleOnLoad) : - document.getElementById(`ajax_upload_file_frame_${this.IETag}${partIEID}`).addEventListener('load', handleOnLoad) + document.getElementById(`ajax_upload_file_frame_${this.IETag}${partIEID}_${this.props.startIEID}`).attachEvent('onload', handleOnLoad) : + document.getElementById(`ajax_upload_file_frame_${this.IETag}${partIEID}_${this.props.startIEID}`).addEventListener('load', handleOnLoad) function handleOnLoad() { @@ -450,22 +452,22 @@ const FileUpload = React.createClass({ that.uploadError(e) } finally { /*清除输入框的值*/ - const oInput = document.getElementById(`ajax_upload_hidden_input_${that.IETag}${partIEID}`) + const oInput = document.getElementById(`ajax_upload_hidden_input_${that.IETag}${partIEID}_${that.props.startIEID}`) oInput.outerHTML = oInput.outerHTML } } this.doUpload(this.fileName, mill) /*置为非空闲*/ - IEFormGroup[currentIEID] = false + this.IEFormGroup[this.currentIEID] = false }, /*IE回调函数*/ //TODO 处理Timeout IECallback(dataType, frameId) { /*回复空闲状态*/ - IEFormGroup[frameId] = true + this.IEFormGroup[frameId] = true - const frame = document.getElementById(`ajax_upload_file_frame_${this.IETag}${frameId}`) + const frame = document.getElementById(`ajax_upload_file_frame_${this.IETag}${+frameId}_${this.props.startIEID}`) const resp = {} const content = frame.contentWindow ? frame.contentWindow.document.body : frame.contentDocument.document.body if(!content) throw new Error('Your browser does not support async upload') @@ -518,7 +520,7 @@ const FileUpload = React.createClass({ /*外部调用方法，取消一个正在进行的xhr，传入id指定xhr（doupload时返回）或者默认取消最近一个。*/ abort(id) { - id === undefined ? + id === undefined ? xhrList[currentXHRID].abort() : xhrList[id].abort() }, @@ -552,7 +554,7 @@ const FileUpload = React.createClass({ getUserAgent() { const userAgentString = this.props.options && this.props.options.userAgent; - const navigatorIsAvailable = typeof navigator !== 'undefined'; + const navigatorIsAvailable = typeof navigator !== 'undefined'; if (!navigatorIsAvailable && !userAgentString) { throw new Error('\`options.userAgent\` must be set rendering react-fileuploader in situations when \`navigator\` is not defined in the global namespace. (on the server, for example)'); } @@ -646,15 +648,15 @@ const FileUpload = React.createClass({ typeof this.disabledIEChoose === 'function' ? this.disabledIEChoose() : this.disabledIEChoose /*这里IEFormGroup的长度会变，所以不能存len*/ - for(let i = 0; i - i = `${this.IETag}${i}` + i = `${this.IETag}${+i}_${this.props.startIEID}` formArr.push((
{ + currentIEID++ + IEFormGroup.push(true) + return +} From be45f3d7e3a95a353a27a60a4c98554bf2973087 Mon Sep 17 00:00:00 2001 From: "qiang.tu" Date: Tue, 4 Jul 2017 12:33:15 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0dist=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 增加对IE9特殊处理的注释 --- dist/main.js | 112 +++++++++++++++++++++++----------------------- dist/main.min.js | 2 +- src/FileUpload.js | 2 +- 3 files changed, 58 insertions(+), 58 deletions(-) diff --git a/dist/main.js b/dist/main.js index e8a1d43..fdd7f3f 100644 --- a/dist/main.js +++ b/dist/main.js @@ -52,13 +52,13 @@ return /******/ (function(modules) { // webpackBootstrap /************************************************************************/ /******/ ([ /* 0 */ -/***/ function(module, exports, __webpack_require__) { +/***/ (function(module, exports, __webpack_require__) { 'use strict'; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /** * Created by cheesu on 2015/8/17. @@ -125,6 +125,8 @@ return /******/ (function(modules) { // webpackBootstrap style: PT.object, className: PT.string }, + IEFormGroup: [true], + currentIEID: 0, /*根据props更新组件*/ _updateProps: function _updateProps(props) { @@ -320,26 +322,24 @@ return /******/ (function(modules) { // webpackBootstrap formData = this.appendFieldsToFormData(formData); } if (!this._withoutFileUpload) { - (function () { - var fieldNameType = _typeof(_this2.fileFieldName); - - /*判断是用什么方式作为formdata item 的 name*/ - Object.keys(_this2.files).forEach(function (key) { - if (key == 'length') return; - - if (fieldNameType == 'function') { - var file = _this2.files[key]; - var fileFieldName = _this2.fileFieldName(file); - formData.append(fileFieldName, file); - } else if (fieldNameType == 'string') { - var _file = _this2.files[key]; - formData.append(_this2.fileFieldName, _file); - } else { - var _file2 = _this2.files[key]; - formData.append(_file2.name, _file2); - } - }); - })(); + var fieldNameType = _typeof(this.fileFieldName); + + /*判断是用什么方式作为formdata item 的 name*/ + Object.keys(this.files).forEach(function (key) { + if (key == 'length') return; + + if (fieldNameType == 'function') { + var file = _this2.files[key]; + var fileFieldName = _this2.fileFieldName(file); + formData.append(fileFieldName, file); + } else if (fieldNameType == 'string') { + var _file = _this2.files[key]; + formData.append(_this2.fileFieldName, _file); + } else { + var _file2 = _this2.files[key]; + formData.append(_file2.name, _file2); + } + }); } /*If we need to add fields after file data append here*/ if (!this.textBeforeFiles) { @@ -354,14 +354,12 @@ return /******/ (function(modules) { // webpackBootstrap var paramStr = ''; if (param) { - (function () { - var paramArr = []; - param['_'] = mill; - Object.keys(param).forEach(function (key) { - return paramArr.push(key + '=' + param[key]); - }); - paramStr = '?' + paramArr.join('&'); - })(); + var paramArr = []; + param['_'] = mill; + Object.keys(param).forEach(function (key) { + return paramArr.push(key + '=' + param[key]); + }); + paramStr = '?' + paramArr.join('&'); } var targeturl = baseUrl + paramStr; @@ -464,7 +462,7 @@ return /******/ (function(modules) { // webpackBootstrap this.fileName = e.target.value.substring(e.target.value.lastIndexOf('\\') + 1); this.chooseFile(this.fileName); /*先执行IEUpload，配置好action等参数，然后submit*/ - this.chooseAndUpload && this.IEUpload() !== false && document.getElementById('ajax_upload_file_form_' + this.IETag + currentIEID).submit(); + this.chooseAndUpload && this.IEUpload() !== false && document.getElementById('ajax_upload_file_form_' + this.IETag + +this.currentIEID + '_' + this.props.startIEID).submit(); e.target.blur(); }, @@ -498,7 +496,7 @@ return /******/ (function(modules) { // webpackBootstrap } var targeturl = baseUrl + paramStr; - document.getElementById('ajax_upload_file_form_' + this.IETag + currentIEID).setAttribute('action', targeturl); + document.getElementById('ajax_upload_file_form_' + this.IETag + +this.currentIEID + '_' + this.props.startIEID).setAttribute('action', targeturl); /*IE假的上传进度*/ var getFakeProgress = this.fakeProgress(); var loaded = 0, @@ -515,9 +513,9 @@ return /******/ (function(modules) { // webpackBootstrap }, 200); /*当前上传id*/ - var partIEID = currentIEID; + var partIEID = +this.currentIEID; /*回调函数*/ - window.attachEvent ? document.getElementById('ajax_upload_file_frame_' + this.IETag + partIEID).attachEvent('onload', handleOnLoad) : document.getElementById('ajax_upload_file_frame_' + this.IETag + partIEID).addEventListener('load', handleOnLoad); + window.attachEvent ? document.getElementById('ajax_upload_file_frame_' + this.IETag + partIEID + '_' + this.props.startIEID).attachEvent('onload', handleOnLoad) : document.getElementById('ajax_upload_file_frame_' + this.IETag + partIEID + '_' + this.props.startIEID).addEventListener('load', handleOnLoad); function handleOnLoad() { /*clear progress interval*/ @@ -528,22 +526,22 @@ return /******/ (function(modules) { // webpackBootstrap that.uploadError(e); } finally { /*清除输入框的值*/ - var oInput = document.getElementById('ajax_upload_hidden_input_' + that.IETag + partIEID); + var oInput = document.getElementById('ajax_upload_hidden_input_' + that.IETag + partIEID + '_' + that.props.startIEID); oInput.outerHTML = oInput.outerHTML; } } this.doUpload(this.fileName, mill); /*置为非空闲*/ - IEFormGroup[currentIEID] = false; + this.IEFormGroup[this.currentIEID] = false; }, /*IE回调函数*/ //TODO 处理Timeout IECallback: function IECallback(dataType, frameId) { /*回复空闲状态*/ - IEFormGroup[frameId] = true; + this.IEFormGroup[frameId] = true; - var frame = document.getElementById('ajax_upload_file_frame_' + this.IETag + frameId); + var frame = document.getElementById('ajax_upload_file_frame_' + this.IETag + +frameId + '_' + this.props.startIEID); var resp = {}; var content = frame.contentWindow ? frame.contentWindow.document.body : frame.contentDocument.document.body; if (!content) throw new Error('Your browser does not support async upload'); @@ -632,7 +630,7 @@ return /******/ (function(modules) { // webpackBootstrap }; }, getUserAgent: function getUserAgent() { - var userAgentString = this.props.options.userAgent; + var userAgentString = this.props.options && this.props.options.userAgent; var navigatorIsAvailable = typeof navigator !== 'undefined'; if (!navigatorIsAvailable && !userAgentString) { throw new Error('\`options.userAgent\` must be set rendering react-fileuploader in situations when \`navigator\` is not defined in the global namespace. (on the server, for example)'); @@ -723,15 +721,15 @@ return /******/ (function(modules) { // webpackBootstrap var isDisabled = typeof this.disabledIEChoose === 'function' ? this.disabledIEChoose() : this.disabledIEChoose; /*这里IEFormGroup的长度会变，所以不能存len*/ - for (var i = 0; i < IEFormGroup.length; i++) { + for (var i = 0; i < this.IEFormGroup.length; i++) { _insertIEForm.call(this, formArr, i); /*如果当前上传组是空闲，hasFree=true，并且指定当前上传组ID*/ - if (IEFormGroup[i] && !hasFree) { + if (this.IEFormGroup[i] && !hasFree) { hasFree = true; - currentIEID = i; + this.currentIEID = i; } /*如果所有上传组都不是空闲状态，push一个新增组*/ - i == IEFormGroup.length - 1 && !hasFree && IEFormGroup.push(true); + i == this.IEFormGroup.length - 1 && !hasFree && this.IEFormGroup.push(true); } return React.createElement( @@ -742,9 +740,9 @@ return /******/ (function(modules) { // webpackBootstrap function _insertIEForm(formArr, i) { /*如果已经push了空闲组而当前也是空闲组*/ - if (IEFormGroup[i] && hasFree) return; + if (this.IEFormGroup[i] && hasFree) return; /*是否display*/ - var isShow = IEFormGroup[i]; + var isShow = this.IEFormGroup[i]; /*Input内联样式*/ var style = { position: 'absolute', @@ -755,19 +753,17 @@ return /******/ (function(modules) { // webpackBootstrap width: '200px', opacity: 0, filter: 'alpha(opacity=0)' - }; - /*是否限制了文件后缀，以及是否disabled*/ - var restAttrs = { + /*是否限制了文件后缀，以及是否disabled*/ + };var restAttrs = { accept: this.accept, disabled: isDisabled - }; - - var input = React.createElement('input', _extends({ type: 'file', name: 'ajax_upload_hidden_input_' + i, id: 'ajax_upload_hidden_input_' + i, + /*在IE9中input被渲染后需要将name改为file*/ + };var input = React.createElement('input', _extends({ className: 'ajax_upload_hidden_input_file', type: 'file', name: 'ajax_upload_hidden_input_' + +i + '_' + this.props.startIEID, id: 'ajax_upload_hidden_input_' + i + '_' + this.props.startIEID, ref: 'ajax_upload_hidden_input_' + i, onChange: this.IEChooseFile, onClick: this.IEBeforeChoose, style: style }, restAttrs)); - i = '' + this.IETag + i; + i = '' + this.IETag + +i + '_' + this.props.startIEID; formArr.push(React.createElement( 'form', { id: 'ajax_upload_file_form_' + i, method: 'post', target: 'ajax_upload_file_frame_' + i, @@ -821,15 +817,19 @@ return /******/ (function(modules) { // webpackBootstrap } }); - module.exports = FileUpload; + module.exports = function (props) { + currentIEID++; + IEFormGroup.push(true); + return React.createElement(FileUpload, _extends({}, props, { startIEID: currentIEID })); + }; -/***/ }, +/***/ }), /* 1 */ -/***/ function(module, exports) { +/***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_1__; -/***/ } +/***/ }) /******/ ]) }); ; \ No newline at end of file diff --git a/dist/main.min.js b/dist/main.min.js index e9c7309..f71e38b 100644 --- a/dist/main.min.js +++ b/dist/main.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-fileupload"]=t(require("react")):e["react-fileupload"]=t(e.React)}(this,function(__WEBPACK_EXTERNAL_MODULE_1__){return function(e){function t(i){if(o[i])return o[i].exports;var a=o[i]={exports:{},id:i,loaded:!1};return e[i].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(module,exports,__webpack_require__){"use strict";var _extends=Object.assign||function(e){for(var t=1;t=10);var o=e.options;this.baseUrl=o.baseUrl,this.param=o.param,this.chooseAndUpload=o.chooseAndUpload||!1,this.paramAddToField=o.paramAddToField||void 0,this.dataType="json",o.dataType&&"text"==o.dataType.toLowerCase()&&(this.dataType="text"),this.wrapperDisplay=o.wrapperDisplay||"inline-block",this.timeout="number"==typeof o.timeout&&o.timeout>0?o.timeout:0,this.accept=o.accept||"",this.multiple=o.multiple||!1,this.numberLimit=o.numberLimit||!1,this.fileFieldName=o.fileFieldName||!1,this.withCredentials=o.withCredentials||!1,this.requestHeaders=o.requestHeaders||!1,this.beforeChoose=o.beforeChoose||emptyFunction,this.chooseFile=o.chooseFile||emptyFunction,this.beforeUpload=o.beforeUpload||emptyFunction,this.doUpload=o.doUpload||emptyFunction,this.uploading=o.uploading||emptyFunction,this.uploadSuccess=o.uploadSuccess||emptyFunction,this.uploadError=o.uploadError||emptyFunction,this.uploadFail=o.uploadFail||emptyFunction,this.onabort=o.onabort||emptyFunction,this.files=o.files||this.files||!1,this.disabledIEChoose=o.disabledIEChoose||!1,this._withoutFileUpload=o._withoutFileUpload||!1,this.filesToUpload=o.filesToUpload||[],this.textBeforeFiles=o.textBeforeFiles||!1,this.filesToUpload.length&&!this.isIE&&this.filesToUpload.forEach(function(e){t.files=[e],t.commonUpload()});var i=void 0,a=void 0,s=0,r=[],n=[],l=[];this.chooseAndUpload?React.Children.forEach(e.children,function(e){e&&"chooseAndUpload"==e.ref?(i=e,s++):0==s?r.push(e):1==s?n.push(e):""}):React.Children.forEach(e.children,function(e){e&&"chooseBtn"==e.ref?(i=e,s++):e&&"uploadBtn"==e.ref?(a=e,s++):0==s?r.push(e):1==s?n.push(e):l.push(e)}),this.setState({chooseBtn:i,uploadBtn:a,before:r,middle:n,after:l})},commonChooseFile:function(){var e=this.beforeChoose();1!=e&&void 0!=e||this.refs.ajax_upload_file_input.click()},commonChange:function(e){var t=void 0;e.dataTransfer?t=e.dataTransfer.files:e.target?t=e.target.files:"";var o="function"==typeof this.numberLimit?this.numberLimit():this.numberLimit;if(this.multiple&&o&&t.length>o){for(var i={},a=0;a=200&&p.status<400){var t="json"==e.dataType?JSON.parse(p.responseText):p.responseText;e.uploadSuccess(t)}else if(4==p.readyState){var o="json"==e.dataType?JSON.parse(p.responseText):p.responseText;e.uploadFail(o)}}catch(a){!i.isTimeout&&e.uploadError({type:"FINISHERROR",message:a.message})}},p.onerror=function(){try{var t="json"==e.dataType?JSON.parse(p.responseText):p.responseText;e.uploadError({type:"XHRERROR",message:t})}catch(o){e.uploadError({type:"XHRERROR",message:o.message})}},p.onprogress=p.upload.onprogress=function(o){e.uploading(o,t)},this._withoutFileUpload?p.send(null):p.send(a),xhrList.push(p);var u=xhrList.length-1;currentXHRID=u,p.onabort=function(){return e.onabort(t,u)},this.doUpload(this.files,t,currentXHRID),this.refs.ajax_upload_file_input.value=""}},appendFieldsToFormData:function(e){var t="function"==typeof this.paramAddToField?this.paramAddToField():this.paramAddToField;return t&&Object.keys(t).map(function(o){return e.append(o,t[o])}),e},IEBeforeChoose:function(e){var t=this.beforeChoose();1!=t&&void 0!=t&&e.preventDefault()},IEChooseFile:function(e){this.fileName=e.target.value.substring(e.target.value.lastIndexOf("\\")+1),this.chooseFile(this.fileName),this.chooseAndUpload&&this.IEUpload()!==!1&&document.getElementById("ajax_upload_file_form_"+this.IETag+currentIEID).submit(),e.target.blur()},IEUpload:function(e){function t(){clearInterval(m);try{s.uploadSuccess(s.IECallback(s.dataType,_))}catch(e){s.uploadError(e)}finally{var t=document.getElementById("ajax_upload_hidden_input_"+s.IETag+_);t.outerHTML=t.outerHTML}}var o=this,i=(new Date).getTime(),a=this.beforeUpload(this.fileName,i);if(!this.fileName||1!=a&&void 0!=a)return e&&e.preventDefault(),!1;var s=this,r=this.baseUrl,n="function"==typeof this.param?this.param(this.fileName):this.param,l="";if(n){var p=[];n._=i,void 0===n.ie&&(n.ie="true");for(var d in n)void 0!=n[d]&&p.push(d+"="+n[d]);l="?"+p.join("&")}var u=r+l;document.getElementById("ajax_upload_file_form_"+this.IETag+currentIEID).setAttribute("action",u);var c=this.fakeProgress(),h=0,f=0,m=setInterval(function(){h=c(h),o.uploading({loaded:h,total:100},i),++f>=150&&clearInterval(m)},200),_=currentIEID;window.attachEvent?document.getElementById("ajax_upload_file_frame_"+this.IETag+_).attachEvent("onload",t):document.getElementById("ajax_upload_file_frame_"+this.IETag+_).addEventListener("load",t),this.doUpload(this.fileName,i),IEFormGroup[currentIEID]=!1},IECallback:function IECallback(dataType,frameId){IEFormGroup[frameId]=!0;var frame=document.getElementById("ajax_upload_file_frame_"+this.IETag+frameId),resp={},content=frame.contentWindow?frame.contentWindow.document.body:frame.contentDocument.document.body;if(!content)throw new Error("Your browser does not support async upload");try{resp.responseText=content.innerHTML||"null innerHTML",resp.json=JSON?JSON.parse(resp.responseText):eval("("+resp.responseText+")")}catch(e){if(e.message&&e.message.indexOf("Unexpected token")>=0){if(resp.responseText.indexOf("{")>=0){var msg=resp.responseText.substring(resp.responseText.indexOf("{"),resp.responseText.lastIndexOf("}")+1);return JSON?JSON.parse(msg):eval("("+msg+")")}return{type:"FINISHERROR",message:e.message}}throw e}return"json"==dataType?resp.json:resp.responseText},forwardChoose:function(){return!this.isIE&&void this.commonChooseFile()},fowardRemoveFile:function(e){this.files=e(this.files)},filesToUpload:function(e){this.isIE||(this.files=e,this.commonUpload())},abort:function(e){void 0===e?xhrList[currentXHRID].abort():xhrList[e].abort()},checkIE:function(){var e=this.userAgent,t=e.indexOf("MSIE");return t<0?-1:parseFloat(e.substring(t+5,e.indexOf(";",t)))},fakeProgress:function(){var e=6,t=.3,o=98,i=.2;return function(a){var s=a;return s>=o?s:(s+=e,e-=t,e=10);var e=this.props.options&&this.props.options.tag;this.IETag=e?e+"_":"",this._updateProps(this.props)},componentDidMount:function(){},componentWillReceiveProps:function(e){this._updateProps(e)},render:function(){return this._packRender()},_packRender:function(){var e="";if(this.isIE)e=this._multiIEForm();else{var t={accept:this.accept,multiple:this.multiple};e=React.createElement("div",{className:this.props.className,style:this.props.style},this.state.before,React.createElement("div",{onClick:this.commonChooseFile,style:{overflow:"hidden",postion:"relative",display:this.wrapperDisplay}},this.state.chooseBtn),this.state.middle,React.createElement("div",{onClick:this.commonUpload,style:{overflow:"hidden",postion:"relative",display:this.chooseAndUpload?"none":this.wrapperDisplay}},this.state.uploadBtn),this.state.after,React.createElement("input",_extends({type:"file",name:"ajax_upload_file_input",ref:"ajax_upload_file_input",style:{display:"none"},onChange:this.commonChange},t)))}return e},_multiIEForm:function(){function e(e,t){if(!IEFormGroup[t]||!o){var a=IEFormGroup[t],s={position:"absolute",left:"-30px",top:0,zIndex:"50",fontSize:"80px",width:"200px",opacity:0,filter:"alpha(opacity=0)"},r={accept:this.accept,disabled:i},n=React.createElement("input",_extends({type:"file",name:"ajax_upload_hidden_input_"+t,id:"ajax_upload_hidden_input_"+t,ref:"ajax_upload_hidden_input_"+t,onChange:this.IEChooseFile,onClick:this.IEBeforeChoose,style:s},r));t=""+this.IETag+t,e.push(React.createElement("form",{id:"ajax_upload_file_form_"+t,method:"post",target:"ajax_upload_file_frame_"+t,key:"ajax_upload_file_form_"+t,encType:"multipart/form-data",ref:"form_"+t,onSubmit:this.IEUpload,style:{display:a?"block":"none"}},this.state.before,React.createElement("div",{style:{overflow:"hidden",position:"relative",display:"inline-block"}},this.state.chooseBtn,n),this.state.middle,React.createElement("div",{style:{overflow:"hidden",position:"relative",display:this.chooseAndUpload?"none":this.wrapperDisplay}},this.state.uploadBtn,React.createElement("input",{type:"submit",style:{position:"absolute",left:0,top:0,fontSize:"50px",width:"200px",opacity:0}})),this.state.after)),e.push(React.createElement("iframe",{id:"ajax_upload_file_frame_"+t,name:"ajax_upload_file_frame_"+t,key:"ajax_upload_file_frame_"+t,className:"ajax_upload_file_frame",style:{display:"none",width:0,height:0,margin:0,border:0}}))}}for(var t=[],o=!1,i="function"==typeof this.disabledIEChoose?this.disabledIEChoose():this.disabledIEChoose,a=0;a=10);var o=e.options;this.baseUrl=o.baseUrl,this.param=o.param,this.chooseAndUpload=o.chooseAndUpload||!1,this.paramAddToField=o.paramAddToField||void 0,this.dataType="json",o.dataType&&"text"==o.dataType.toLowerCase()&&(this.dataType="text"),this.wrapperDisplay=o.wrapperDisplay||"inline-block",this.timeout="number"==typeof o.timeout&&o.timeout>0?o.timeout:0,this.accept=o.accept||"",this.multiple=o.multiple||!1,this.numberLimit=o.numberLimit||!1,this.fileFieldName=o.fileFieldName||!1,this.withCredentials=o.withCredentials||!1,this.requestHeaders=o.requestHeaders||!1,this.beforeChoose=o.beforeChoose||emptyFunction,this.chooseFile=o.chooseFile||emptyFunction,this.beforeUpload=o.beforeUpload||emptyFunction,this.doUpload=o.doUpload||emptyFunction,this.uploading=o.uploading||emptyFunction,this.uploadSuccess=o.uploadSuccess||emptyFunction,this.uploadError=o.uploadError||emptyFunction,this.uploadFail=o.uploadFail||emptyFunction,this.onabort=o.onabort||emptyFunction,this.files=o.files||this.files||!1,this.disabledIEChoose=o.disabledIEChoose||!1,this._withoutFileUpload=o._withoutFileUpload||!1,this.filesToUpload=o.filesToUpload||[],this.textBeforeFiles=o.textBeforeFiles||!1,this.filesToUpload.length&&!this.isIE&&this.filesToUpload.forEach(function(e){t.files=[e],t.commonUpload()});var i=void 0,s=void 0,a=0,r=[],n=[],l=[];this.chooseAndUpload?React.Children.forEach(e.children,function(e){e&&"chooseAndUpload"==e.ref?(i=e,a++):0==a?r.push(e):1==a?n.push(e):""}):React.Children.forEach(e.children,function(e){e&&"chooseBtn"==e.ref?(i=e,a++):e&&"uploadBtn"==e.ref?(s=e,a++):0==a?r.push(e):1==a?n.push(e):l.push(e)}),this.setState({chooseBtn:i,uploadBtn:s,before:r,middle:n,after:l})},commonChooseFile:function(){var e=this.beforeChoose();1!=e&&void 0!=e||this.refs.ajax_upload_file_input.click()},commonChange:function(e){var t=void 0;e.dataTransfer?t=e.dataTransfer.files:e.target?t=e.target.files:"";var o="function"==typeof this.numberLimit?this.numberLimit():this.numberLimit;if(this.multiple&&o&&t.length>o){for(var i={},s=0;s=200&&u.status<400){var t="json"==e.dataType?JSON.parse(u.responseText):u.responseText;e.uploadSuccess(t)}else if(4==u.readyState){var o="json"==e.dataType?JSON.parse(u.responseText):u.responseText;e.uploadFail(o)}}catch(t){!i.isTimeout&&e.uploadError({type:"FINISHERROR",message:t.message})}},u.onerror=function(){try{var t="json"==e.dataType?JSON.parse(u.responseText):u.responseText;e.uploadError({type:"XHRERROR",message:t})}catch(t){e.uploadError({type:"XHRERROR",message:t.message})}},u.onprogress=u.upload.onprogress=function(o){e.uploading(o,t)},this._withoutFileUpload?u.send(null):u.send(s),xhrList.push(u);var c=xhrList.length-1;currentXHRID=c,u.onabort=function(){return e.onabort(t,c)},this.doUpload(this.files,t,currentXHRID),this.refs.ajax_upload_file_input.value=""}},appendFieldsToFormData:function(e){var t="function"==typeof this.paramAddToField?this.paramAddToField():this.paramAddToField;return t&&Object.keys(t).map(function(o){return e.append(o,t[o])}),e},IEBeforeChoose:function(e){var t=this.beforeChoose();1!=t&&void 0!=t&&e.preventDefault()},IEChooseFile:function(e){this.fileName=e.target.value.substring(e.target.value.lastIndexOf("\\")+1),this.chooseFile(this.fileName),this.chooseAndUpload&&this.IEUpload()!==!1&&document.getElementById("ajax_upload_file_form_"+this.IETag+ +this.currentIEID+"_"+this.props.startIEID).submit(),e.target.blur()},IEUpload:function(e){function t(){clearInterval(m);try{a.uploadSuccess(a.IECallback(a.dataType,_))}catch(e){a.uploadError(e)}finally{var e=document.getElementById("ajax_upload_hidden_input_"+a.IETag+_+"_"+a.props.startIEID);e.outerHTML=e.outerHTML}}var o=this,i=(new Date).getTime(),s=this.beforeUpload(this.fileName,i);if(!this.fileName||1!=s&&void 0!=s)return e&&e.preventDefault(),!1;var a=this,r=this.baseUrl,n="function"==typeof this.param?this.param(this.fileName):this.param,l="";if(n){var p=[];n._=i,void 0===n.ie&&(n.ie="true");for(var d in n)void 0!=n[d]&&p.push(d+"="+n[d]);l="?"+p.join("&")}var u=r+l;document.getElementById("ajax_upload_file_form_"+this.IETag+ +this.currentIEID+"_"+this.props.startIEID).setAttribute("action",u);var h=this.fakeProgress(),c=0,f=0,m=setInterval(function(){c=h(c),o.uploading({loaded:c,total:100},i),++f>=150&&clearInterval(m)},200),_=+this.currentIEID;window.attachEvent?document.getElementById("ajax_upload_file_frame_"+this.IETag+_+"_"+this.props.startIEID).attachEvent("onload",t):document.getElementById("ajax_upload_file_frame_"+this.IETag+_+"_"+this.props.startIEID).addEventListener("load",t),this.doUpload(this.fileName,i),this.IEFormGroup[this.currentIEID]=!1},IECallback:function IECallback(dataType,frameId){this.IEFormGroup[frameId]=!0;var frame=document.getElementById("ajax_upload_file_frame_"+this.IETag+ +frameId+"_"+this.props.startIEID),resp={},content=frame.contentWindow?frame.contentWindow.document.body:frame.contentDocument.document.body;if(!content)throw new Error("Your browser does not support async upload");try{resp.responseText=content.innerHTML||"null innerHTML",resp.json=JSON?JSON.parse(resp.responseText):eval("("+resp.responseText+")")}catch(e){if(e.message&&e.message.indexOf("Unexpected token")>=0){if(resp.responseText.indexOf("{")>=0){var msg=resp.responseText.substring(resp.responseText.indexOf("{"),resp.responseText.lastIndexOf("}")+1);return JSON?JSON.parse(msg):eval("("+msg+")")}return{type:"FINISHERROR",message:e.message}}throw e}return"json"==dataType?resp.json:resp.responseText},forwardChoose:function(){return!this.isIE&&void this.commonChooseFile()},fowardRemoveFile:function(e){this.files=e(this.files)},filesToUpload:function(e){this.isIE||(this.files=e,this.commonUpload())},abort:function(e){void 0===e?xhrList[currentXHRID].abort():xhrList[e].abort()},checkIE:function(){var e=this.userAgent,t=e.indexOf("MSIE");return t<0?-1:parseFloat(e.substring(t+5,e.indexOf(";",t)))},fakeProgress:function(){var e=6,t=.3,o=98,i=.2;return function(s){var a=s;return a>=o?a:(a+=e,e-=t,e=10);var e=this.props.options&&this.props.options.tag;this.IETag=e?e+"_":"",this._updateProps(this.props)},componentDidMount:function(){},componentWillReceiveProps:function(e){this._updateProps(e)},render:function(){return this._packRender()},_packRender:function(){var e="";if(this.isIE)e=this._multiIEForm();else{var t={accept:this.accept,multiple:this.multiple};e=React.createElement("div",{className:this.props.className,style:this.props.style},this.state.before,React.createElement("div",{onClick:this.commonChooseFile,style:{overflow:"hidden",postion:"relative",display:this.wrapperDisplay}},this.state.chooseBtn),this.state.middle,React.createElement("div",{onClick:this.commonUpload,style:{overflow:"hidden",postion:"relative",display:this.chooseAndUpload?"none":this.wrapperDisplay}},this.state.uploadBtn),this.state.after,React.createElement("input",_extends({type:"file",name:"ajax_upload_file_input",ref:"ajax_upload_file_input",style:{display:"none"},onChange:this.commonChange},t)))}return e},_multiIEForm:function(){function e(e,t){if(!this.IEFormGroup[t]||!o){var s=this.IEFormGroup[t],a={position:"absolute",left:"-30px",top:0,zIndex:"50",fontSize:"80px",width:"200px",opacity:0,filter:"alpha(opacity=0)"},r={accept:this.accept,disabled:i},n=React.createElement("input",_extends({className:"ajax_upload_hidden_input_file",type:"file",name:"ajax_upload_hidden_input_"+ +t+"_"+this.props.startIEID,id:"ajax_upload_hidden_input_"+t+"_"+this.props.startIEID,ref:"ajax_upload_hidden_input_"+t,onChange:this.IEChooseFile,onClick:this.IEBeforeChoose,style:a},r));t=""+this.IETag+ +t+"_"+this.props.startIEID,e.push(React.createElement("form",{id:"ajax_upload_file_form_"+t,method:"post",target:"ajax_upload_file_frame_"+t,key:"ajax_upload_file_form_"+t,encType:"multipart/form-data",ref:"form_"+t,onSubmit:this.IEUpload,style:{display:s?"block":"none"}},this.state.before,React.createElement("div",{style:{overflow:"hidden",position:"relative",display:"inline-block"}},this.state.chooseBtn,n),this.state.middle,React.createElement("div",{style:{overflow:"hidden",position:"relative",display:this.chooseAndUpload?"none":this.wrapperDisplay}},this.state.uploadBtn,React.createElement("input",{type:"submit",style:{position:"absolute",left:0,top:0,fontSize:"50px",width:"200px",opacity:0}})),this.state.after)),e.push(React.createElement("iframe",{id:"ajax_upload_file_frame_"+t,name:"ajax_upload_file_frame_"+t,key:"ajax_upload_file_frame_"+t,className:"ajax_upload_file_frame",style:{display:"none",width:0,height:0,margin:0,border:0}}))}}for(var t=[],o=!1,i="function"==typeof this.disabledIEChoose?this.disabledIEChoose():this.disabledIEChoose,s=0;s Date: Tue, 4 Jul 2017 12:45:46 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0dist=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=A4=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/main.js | 5 +++-- src/FileUpload.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/dist/main.js b/dist/main.js index fdd7f3f..16c5290 100644 --- a/dist/main.js +++ b/dist/main.js @@ -758,8 +758,9 @@ return /******/ (function(modules) { // webpackBootstrap };var restAttrs = { accept: this.accept, disabled: isDisabled - /*在IE9中input被渲染后需要将name改为file*/ - };var input = React.createElement('input', _extends({ className: 'ajax_upload_hidden_input_file', type: 'file', name: 'ajax_upload_hidden_input_' + +i + '_' + this.props.startIEID, id: 'ajax_upload_hidden_input_' + i + '_' + this.props.startIEID, + }; + + var input = React.createElement('input', _extends({ className: 'ajax_upload_hidden_input_file', type: 'file', name: 'ajax_upload_hidden_input_' + +i + '_' + this.props.startIEID, id: 'ajax_upload_hidden_input_' + i + '_' + this.props.startIEID, ref: 'ajax_upload_hidden_input_' + i, onChange: this.IEChooseFile, onClick: this.IEBeforeChoose, style: style }, restAttrs)); diff --git a/src/FileUpload.js b/src/FileUpload.js index 4e59ae9..b9a2072 100644 --- a/src/FileUpload.js +++ b/src/FileUpload.js @@ -688,7 +688,7 @@ const FileUpload = React.createClass({ accept: this.accept, disabled: isDisabled } - /*在IE9中input被渲染后需要将name改为file*/ + const input =