/*
* FireFoxFileSender version 0.0.0.1
* by MK winnie_mk(a)126.com
*
* [This program is limited to FireFox3.x version, other browsers Whether the server can run has not been tested. 】
* 【Test passed: FireFox 3.6.8 / Apache/2.2.11 (Win32) php/5.2.6 】
* ****************** *************************************************** **********
* This program takes advantage of the feature of the 3.x FireFox browser that can read local files
* Implements the function of uploading large files through xmlhttpRequest
* And can Dynamically display the upload progress during the upload process
* With slight modifications and cooperation with the server, many functions such as breakpoint resumption can be realized
* This example is mainly to study some features of FireFox's file-input node
* Other client applications, such as Flash, Silverlight, etc., when implementing client-side large file uploads
* In terms of data transmission and server-side storage, the idea is basically the same as this example
* Note: file size There seems to be a tipping point, but what that tipping point is has not yet been confirmed. It is recommended not to use this method to upload files exceeding 100M.
************************************************* ************************************
*/
function FireFoxFileSender(config){
var conf = config || {};
/*
* Error message queue
*/
this.errMsg = [];
/*
* Determine whether all 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;
/*
* Failed when trying to send the binary stream directly, sending base64 encoded data instead.
*/
this.data = (this.data = this.f.files[0].getAsDataURL())
.substr(this.data.indexOf(',') + 1);
this.length = this.data.length;
/*
* Actual file size
*/
this.fileSize = this.f.files[0].fileSize;
???????? /*
??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????> */
this.url = conf.url;
if(!this.url){
this.errMsg.push('Error: Not set the instance url to send binary.');
　}
/*
* The size of the sent data packet. Default 100kb
*/
this.packageSize = conf.packageSize || 102400;
/*
* The size of each data packet sent should be a multiple of 4 to ensure that the server-side conversion to base64 encoding is correct.
*/
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 = {
/*
* Record the currently sent data
*/
currentData: null,
/*
* Record the reading position
*/
position: 0,
/*
* Data size. The value is the length of the base64 string.
*/
length: -1,
/*
* Check the error queue and try to trigger the onError event
*/
checkError: function(){
if(this .errMsg.length > 0){
?????????????????????????????????????????????????????????????????????????????????????????????????????????;
return;
}
},
/*
* Create XMLHttpRequest
*/
createSender: function(){
var xhr = new XMLH ttpRequest();
?????? xhr.open('POST', this.url, true); Then read and send in a loop.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???????????????????? */
?????????????????????????????????????????????????????????????????????????????????????onSending == 'function') _.onSending(_, xhr);
???????????????????????????????????????????????????????????????????????var send = setTimeout( function(){
_.send();
clearTimeout(send);
send = null;
}, 100);??????????????????????????????????????????????????????????????????????????
},
/*
* Send data
*/
send: function(){
this.checkError();
/*
* Get the current Data to be sent
*/
this.currentData = this.data.substr(this.position, this.packageSize);
/*
* Change postion, simulate data flow shift
?*/
if(this.currentData.length > 0) {
var xhr = this.createSender();
/*
* Custom header information to notify the server of file-related information
* This part can be modified for actual 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') {
??????????? /*
???????????? * 觸發(fā)onSendFinished事件
???????????? */
??????????? this.onSendFinished(this);
??????? }
??? },
??? /*
???? * 計(jì)算已發(fā)送數(shù)據(jù)百分比
???? */
??? percent : function(){
??????? if(this.length <= 0 ) return -1;
return Math.round((this.position / this.length) * 10000) / 100;
},
onSendFinished : null, //該事件是以本地?cái)?shù)據(jù)發(fā)送完成為觸發(fā)，并不是服務(wù)器端返回的完成信息。
onSending : null,
onError : null
}

/*
* Upload button event
*/
function send(fileID){
var sender = new FireFoxFileSender(
) /*
* Upload configuration file
*/
?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? /*< ?????Change according to server specific conditions. IIS6 defaults to 200K
* /
PackageSize: '200000',
/ *
*Trigger the event when an error occurs. Error in the sending process.
??> Delete sender;
??????????????????????????????????????????????????????????????????????????????????){
var per = sd.percent();
????????????????? document.getElementById('Message').
triggered by onreadystatechange event * If there are no other errors during the transmission process, it can basically be determined that the server-side reception is completed
'); }
??????????????,
???????????/*
??????????????????????????????????????????????????????????????????
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
* Just make sure xhr returns readyState == 4 and status == 200
* The sending will continue
* How the server returns the completion information can be customized by changing the code of the receiving data page
* Then make a judgment based on the value of xhr.responseText }
);
sender.send();
}


The following is the server-side php code



Copy code

*/
$headers = getallheaders();
$fileName = $headers['#FILE_NAME#'];
$contentType = $headers['#CONTENT_TYPE# '];

/*
* Make some judgments and processing...
*/

/*
* The following is a simple response from the server to sending data

* - If data is posted, output the length of the binary stream after converting base64 to a binary stream

* - Otherwise Output 0
* This is just an example, and this information is not received on the js side
* Similarly, you can also use methods such as writing feedback information in the header

* Feedback information to the client

* The main purpose is to determine whether there are other problems during the upload process
* To ensure that the uploaded file is complete
*/
if(!empty($b64)){
$stream = base64_decode($ b64);
echo strlen($stream);
/*
* Write the file in append mode
* Modify the file save location here
*/
$file = fopen( '' . $fileName , 'a');
if($file)
if(fwrite($file, $stream))
fclose($file);
} else echo '0 ';


Complete client code



Copy code

2
3
4
5
6
7
8 < body>
9