以下是服务器端php代码
/* * 获取输入信息 */$b64 = file_get_contents("php://input");/* * 获取头部信息 */$headers = getallheaders();$fileName = $headers['#FILE_NAME#'];$contentType = $headers['#CONTENT_TYPE#'];/* * 做一些判断和处理... *//* * 以下是服务器端对发送数据的简单响应 * - 假如有数据被post过来 则输出对base64转换为二进制流后，二进制流的长度 * - 否则输出0 * 这仅仅是一个例子，并且在js端没有接收这个信息 * 同样，也可以采用在header中写入反馈信息等等方法 * 回馈信息给客户端 * 主要目的是确定上传过程中是否有其他问题出现 * 以确保上传文件完整 */if(!empty($b64)){ $stream = base64_decode($b64); echo strlen($stream); /* * 追加方式写入文件 * 在此修改文件保存位置 */ $file = fopen('' . $fileName , 'a'); if($file) if(fwrite($file, $stream)) fclose($file);} else echo '0';
客户端完整代码
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>FireFoxFileSender - !! ONLY FOR FireFox !!</title> 6 </head> 7 8 <body> 9 <script type="text/Javascript"> 10 /* 11 * FireFoxFileSender version 0.0.0.1 12 * by MK winnie_mk(a)126.com 13 * 14 * 【本程序仅限于FireFox3.x版本，其他浏览器是否可以运行未做测试。】 15 * 【测试通过：FireFox 3.6.8 / Apache/2.2.11 (Win32) PHP/5.2.6 】 16 * ********************************************************************************* 17 * 本程序是利用3.x的FireFox浏览器可以读取本地文件的特性 18 * 实现通过XMLHttpRequest上传大文件功能 19 * 并在可以上传过程中动态显示上传进度 20 * 略加修改，并与服务器端配合，可以实现断点续传等诸多功能 21 * 本例主要是研究FireFox的file-input节点的一些特性 22 * 其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时 23 * 在数据传输与服务器端存储等方面，与本例的思路基本一致 24 * 注意：文件体积似乎有个临界点，但这个临界点是多少尚未确认。建议不要用此方法上传超过100M的文件。 25 * ********************************************************************************* 26 */ 27 function FireFoxFileSender(config){ 28 var conf = config || {}; 29 /* 30 * 错误信息队列 31 */ 32 this.errMsg = []; 33 /* 34 * 判断各参数是否齐备 35 */ 36 this.f = typeof conf.file == 'string' ? document.getElementById(conf.file) : conf.file; 37 if(!this.f){ this.errMsg.push('Error: Not set the input file.'); } 38 else if(this.f.files.length < 1){ this.errMsg.push('Error: Not select a file.'); } 39 else { 40 this.fileName = this.f.value; 41 /* 42 * 在尝试直接发送二进制流时失败，改用发送base64编码数据。 43 */ 44 this.data = (this.data = this.f.files[0].getAsDataURL()).substr(this.data.indexOf(',') + 1); 45 this.length = this.data.length; 46 /* 47 * 文件实际大小 48 */ 49 this.fileSize = this.f.files[0].fileSize; 50 /* 51 * 文件类型 52 */ 53 this.contentType = this.f.files[0].fileType; 54 } 55 /* 56 * 服务器端接收地址 57 */ 58 this.url = conf.url; 59 if(!this.url){ this.errMsg.push('Error: Not set the instance url to send binary.'); } 60 /* 61 * 发送数据包的大小。默认100kb 62 */ 63 this.packageSize = conf.packageSize || 102400; 64 /* 65 * 每次发送数据包大小应为4的倍数，确保服务器端转换base64编码正确。 66 */ 67 if(this.packageSize % 4 != 0) this.packageSize = parseInt(this.packageSize / 4) * 4; 68 69 this.onSendFinished = conf.onSendFinished || null; 70 this.onSending = conf.onSending || null; 71 this.onError = conf.onError || null; 72 } 73 FireFoxFileSender.prototype = { 74 /* 75 * 记录当前发送的数据 76 */ 77 currentData : null, 78 /* 79 * 记录读取位置 80 */ 81 position : 0, 82 /* 83 * 数据大小。该值为base64字符串的长度。 84 */ 85 length : -1, 86 /* 87 * 检查错误队列，尝试触发onError事件 88 */ 89 checkError : function(){ 90 if(this.errMsg.length > 0){ 91 /* 92 * 触发onError事件 93 */ 94 typeof this.onError == 'function' && this.onError(this.errMsg); 95 return; 96 } 97 }, 98 /* 99 * 创建XMLHttpRequest100 */101 createSender : function(){102 var xhr = new XMLHttpRequest();103 xhr.open('POST', this.url, true);104 var _ = this;105 xhr.onreadystatechange = function(){106 /*107 * 当服务器段响应正常，则循环读取发送。108 */109 if(xhr.readyState == 4 && xhr.status == 200){110 /* 111 * 触发onSending事件112 */113 if(typeof _.onSending == 'function') _.onSending(_, xhr);114 /*115 * 延时发送下一次请求，否则服务器负担过重116 */117 var send = setTimeout(function(){118 _.send();119 clearTimeout(send);120 send = null;121 }, 100); 122 }123 }124 return xhr;125 },126 /*127 * 发送数据128 */129 send : function(){130 this.checkError();131 /*132 * 获取当前要发送的数据133 */134 this.currentData = this.data.substr(this.position, this.packageSize);135 /*136 * 更改postion，模拟数据流移位137 */138 this.position += this.currentData.length;139 /*140 * 如果读取字符串长度大于0，则发送该数据141 * 否则触发onSendFinished事件142 */143 if(this.currentData.length > 0) {144 var xhr = this.createSender();145 /*146 * 自定义头部信息，通知服务器端文件相关信息147 * 实际应用时可修改此部分。148 */149 xhr.setRequestHeader('#FILE_NAME#', this.fileName);150 xhr.setRequestHeader('#FILE_SIZE#', this.length);151 xhr.setRequestHeader('#CONTENT_TYPE#', this.contentType);152 153 xhr.send(this.currentData);154 } else if(typeof this.onSendFinished == 'function') {155 /*156 * 触发onSendFinished事件157 */158 this.onSendFinished(this);159 }160 },161 /*162 * 计算已发送数据百分比163 */164 percent : function(){165 if(this.length <= 0 ) return -1;166 return Math.round((this.position / this.length) * 10000) / 100;167 },168 onSendFinished : null, //该事件是以本地数据发送完成为触发，并不是服务器端返回的完成信息。169 onSending : null,170 onError : null171 }172 173 /*174 * 上传按钮事件175 */176 function%3
2/3 首页 上一页 1 2 3 下一页 尾页 |
