Shulou(Shulou.com)06/03 Report--

This article mainly explains how FireFox browsers use Javascript to upload large files. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how FireFox browsers use Javascript to upload large files.

This procedure is the use of 3.x Firefox browser can read the characteristics of local files, to achieve the function of uploading large files through xmlHttPRequest, and can dynamically display the upload progress in the upload process. With a little modification and cooperation with the server, many functions such as breakpoint continuation can be realized.

This example mainly studies some characteristics of the file-input node of FireFox. Other client applications, such as Flash and Sliverlight, are basically consistent with this example in terms of data transmission and server-side storage when uploading large files on the client side.

Note: there seems to be a tipping point for file volume, but how much of this tipping point has not been confirmed. It is not recommended to use this method to upload files exceeding 100m.

Here is the client-side javascript code

The copy code is as follows:

/ *

* FireFoxFileSender version 0.0.0.1

* by MK winnie_mk (a) 126.com

*

* [this program is limited to the FireFox3.x version, whether other browsers can run without testing. ]

* [passed the test: FireFox 3.6.8 / Apache/2.2.11 (Win32) php/5.2.6]

* *

* this program uses the 3.x FireFox browser to read local files.

* realize the function of uploading large files through xmlhttpRequest

* and dynamically display the upload progress during the upload process

* with a little modification and cooperation with the server, many functions such as breakpoint continuation can be realized.

* this example mainly studies some characteristics of the file-input node of FireFox

* other client applications, such as Flash, Sliverlight, etc., when uploading large files on the client

* it is basically the same as this example in terms of data transmission and server-side storage.

* Note: there seems to be a tipping point for file volume, but how much of this tipping point has not been confirmed. It is not recommended to use this method to upload files exceeding 100m.

* *

, /

Function FireFoxFileSender (config) {

Var conf = config | | {}

/ *

* error message queue

, /

This.errMsg = []

/ *

* determine whether the parameters are complete

, /

This.f = typeof conf.file = = 'string'?

Document.getElementById (conf.file): conf.file

If (! this.f) {this.errMsg.push ('Error: Not set the input file.');}

Else if (this.f.files.length

< 1){ this.errMsg.push('Error: Not select a file.'); } else { this.fileName = this.f.value; /* * 在尝试直接发送二进制流时失败，改用发送base64编码数据。 */ this.data = (this.data = this.f.files[0].getAsDataURL()) 　　　　　　.substr(this.data.indexOf(',') + 1); this.length = this.data.length; /* * 文件实际大小 */ this.fileSize = this.f.files[0].fileSize; /* * 文件类型 */ this.contentType = this.f.files[0].fileType; } /* * 服务器端接收地址 */ this.url = conf.url; if(!this.url){ 　　　　this.errMsg.push('Error: Not set the instance url to send binary.'); 　　} /* * 发送数据包的大小。默认100kb */ this.packageSize = conf.packageSize || 102400; /* * 每次发送数据包大小应为4的倍数，确保服务器端转换base64编码正确。 */ if(this.packageSize % 4 != 0) 　　　　this.packageSize = parseInt(this.packageSize / 4) * 4; this.onSendFinished = conf.onSendFinished || null; this.onSending = conf.onSending || null; this.onError = conf.onError || null; } FireFoxFileSender.prototype = { /* * 记录当前发送的数据 */ currentData : null, /* * 记录读取位置 */ position : 0, /* * 数据大小。该值为base64字符串的长度。 */ length : -1, /* * 检查错误队列，尝试触发onError事件 */ checkError : function(){ if(this.errMsg.length >

0) {

/ *

* trigger onError event

, /

Typeof this.onError = 'function' & & this.onError (this.errMsg)

Return

}

}

/ *

* create XMLHttpRequest

, /

CreateSender: function () {

Var xhr = new XMLHttpRequest ()

Xhr.open ('POST', this.url, true)

Var _ = this

Xhr.onreadystatechange = function () {

/ *

* when the response of the server segment is normal, it is read and sent in a loop.

, /

If (xhr.readyState = = 4 & & xhr.status = = 200) {

/ *

* trigger onSending event

, /

If (typeof _. OnSending = = 'function') _ .onSending (_, xhr)

/ *

* delay sending the next request, otherwise the server will be overburdened

, /

Var send = setTimeout (function () {

_ .send ()

ClearTimeout (send)

Send = null

}, 100)

}

}

Return xhr

}

/ *

* send data

, /

Send: function () {

This.checkError ()

/ *

* get the data currently to be sent

, /

This.currentData = this.data.substr (this.position, this.packageSize)

/ *

* change postion to simulate data flow shift

, /

This.position + = this.currentData.length

/ *

* if the read string length is greater than 0, the data is sent

* otherwise, trigger the onSendFinished event

, /

If (this.currentData.length > 0) {

Var xhr = this.createSender ()

/ *

* Custom header information to notify server-side file related information

* this part can be modified in practical application.

, /

Xhr.setRequestHeader ('# FILE_NAME#', this.fileName)

Xhr.setRequestHeader ('# FILE_SIZE#', this.length)

Xhr.setRequestHeader ('# CONTENT_TYPE#', this.contentType)

Xhr.send (this.currentData)

} else if (typeof this.onSendFinished = = 'function') {

/ *

* trigger onSendFinished event

, /

This.onSendFinished (this)

}

}

/ *

* calculate the percentage of data sent

, /

Percent: function () {

If (this.length 0) {

91 / *

92 * trigger onError event

93 * /

94 typeof this.onError = 'function' & & this.onError (this.errMsg)

95 return

96}

97}

98 / *

99 * create XMLHttpRequest

100 * /

101 createSender: function () {

102 var xhr = new XMLHttpRequest ()

103 xhr.open ('POST', this.url, true)

104 var _ = this

105 xhr.onreadystatechange = function () {

106 / *

107 * when the server segment responds normally, it is looped to read and send.

108 * /

109 if (xhr.readyState = = 4 & & xhr.status = = 200) {

110 / *

111l * trigger onSending event

112 * /

113if (typeof _. OnSending = = 'function') _ .onSending (_, xhr)

114 / *

115 * delay sending the next request, otherwise the server will be overburdened

116 * /

17 var send = setTimeout (function () {

118 _ .send ()

119 clearTimeout (send)

120 send = null

121}, 100)

122}

123}

124 return xhr

125}

126 / *

127 * send data

128 * /

129 send: function () {

130 this.checkError ()

131 / *

132 * get the data currently to be sent

133 * /

134 this.currentData = this.data.substr (this.position, this.packageSize)

135 / *

136change postion to simulate data flow shift

137 * /

138this.position + = this.currentData.length

139 / *

140 * if the read string length is greater than 0, the data is sent

Otherwise, the onSendFinished event is triggered.

142 * /

143 if (this.currentData.length > 0) {

144var xhr = this.createSender ()

145 / *

146 * Custom header information to notify the server-side file related information

147 * this part can be modified in practical application.

148 * /

149 xhr.setRequestHeader ('# FILE_NAME#', this.fileName)

150 xhr.setRequestHeader ('# FILE_SIZE#', this.length)

151xhr.setRequestHeader ('# CONTENT_TYPE#', this.contentType)

one hundred and fifty two

153 xhr.send (this.currentData)

Else if (typeof this.onSendFinished = = 'function') {

155 / *

156 * trigger onSendFinished event

157 * /

158 this.onSendFinished (this)

159}

160}

161 / *

162 * calculate the percentage of data sent

163 * /

164percent: function () {

165 if (this.length

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.