php – 未定义FormData时如何在Web Workers中上载文件

前端之家收集整理的这篇文章主要介绍了php – 未定义FormData时如何在Web Workers中上载文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我通过Web Worker上传时,如何在 PHP中检索$_FILES?当我尝试使用FormData时,出现以下错误

Error: FormData is not defined

这是我的代码

  1. function uploadFile(blobFile,fileName,filePart,totalChunks) {
  2. //if I try to put this
  3. //var formData = new FormData(); //it does not work
  4. var xhr = new XMLHttpRequest();
  5. xhr.open("POST","upload.PHP"+"?"+"file="+fileName + filePart,true);
  6. xhr.onload = function(e) {};
  7. xhr.send(blobFile);
  8. }

所以在upload.PHP中,我应该如何从$_FILES获取tmp路径?为了以防万一,我还将显示引用Web worker的页面

  1. <form id="fileuploader" enctype="multipart/form-data" method="post" action="upload.PHP">
  2. <label for="fileToUpload">Select Files to Upload</label><br />
  3. <input type="file" name="fileToUpload[]" multiple="" id="fileToUpload" onchange="fileList();"/><br />
  4. <input type="button" onclick="sendRequest();" value="Upload" />
  5. <!-- a place for File Listing -->
  6. <div id="fileList"></div>
  7. </form>
  8. <script type="text/javascript">
  9. function sendRequest() {
  10. var worker = new Worker("fileupload.js");
  11. worker.onmessage = function(e) {
  12. alert(e.data);
  13. }
  14. var file = document.getElementById('fileToUpload');
  15. for(var i = 0; i < file.files.length; i++) {
  16. worker.postMessage(file.files[i]);
  17. }
  18. }
我编写了以下polyfill来模拟Web Workers中的FormData方法.由于Web worker不支持DOM,因此新的FormData(< HTMLFormElement>);也不支持构造函数调用.
但是,polyfill支持文件和Blob对象,类型化数组和字符串.

它最初是作为Upload a File in a Google Chrome Extension的答案的一部分发布的.要查看如何使用它的示例,请查看其他答案.

  1. /*
  2. * FormData for XMLHttpRequest 2 - Polyfill for Web Worker (c) 2012 Rob W
  3. * License: Creative Commons BY - http://creativecommons.org/licenses/by/3.0/
  4. * - append(name,value[,filename])
  5. * - toString: Returns an ArrayBuffer object
  6. *
  7. * Specification: http://www.w3.org/TR/XMLHttpRequest/#formdata
  8. * http://www.w3.org/TR/XMLHttpRequest/#the-send-method
  9. * The .append() implementation also accepts Uint8Array and ArrayBuffer objects
  10. * Web Workers do not natively support FormData:
  11. * http://dev.w3.org/html5/workers/#apis-available-to-workers
  12. **/
  13. (function() {
  14. // Export variable to the global scope
  15. (this == undefined ? self : this)['FormData'] = FormData;
  16.  
  17. var ___send$rw = XMLHttpRequest.prototype.send;
  18. XMLHttpRequest.prototype['send'] = function(data) {
  19. if (data instanceof FormData) {
  20. if (!data.__endedMultipart) data.__append('--' + data.boundary + '--\r\n');
  21. data.__endedMultipart = true;
  22. this.setRequestHeader('Content-Type','multipart/form-data; boundary=' + data.boundary);
  23. data = new Uint8Array(data.data).buffer;
  24. }
  25. // Invoke original XHR.send
  26. return ___send$rw.call(this,data);
  27. };
  28.  
  29. function FormData() {
  30. // Force a Constructor
  31. if (!(this instanceof FormData)) return new FormData();
  32. // Generate a random boundary - This must be unique with respect to the form's contents.
  33. this.boundary = '------RWWorkerFormDataBoundary' + Math.random().toString(36);
  34. var internal_data = this.data = [];
  35. /**
  36. * Internal method.
  37. * @param inp String | ArrayBuffer | Uint8Array Input
  38. */
  39. this.__append = function(inp) {
  40. var i=0,len;
  41. if (typeof inp === 'string') {
  42. for (len=inp.length; i<len; i++)
  43. internal_data.push(inp.charCodeAt(i) & 0xff);
  44. } else if (inp && inp.byteLength) {/*If ArrayBuffer or typed array */
  45. if (!('byteOffset' in inp)) /* If ArrayBuffer,wrap in view */
  46. inp = new Uint8Array(inp);
  47. for (len=inp.byteLength; i<len; i++)
  48. internal_data.push(inp[i] & 0xff);
  49. }
  50. };
  51. }
  52. /**
  53. * @param name String Key name
  54. * @param value String|Blob|File|Uint8Array|ArrayBuffer Value
  55. * @param filename String Optional File name (when value is not a string).
  56. **/
  57. FormData.prototype['append'] = function(name,value,filename) {
  58. if (this.__endedMultipart) {
  59. // Truncate the closing boundary
  60. this.data.length -= this.boundary.length + 6;
  61. this.__endedMultipart = false;
  62. }
  63. var valueType = Object.prototype.toString.call(value),part = '--' + this.boundary + '\r\n' +
  64. 'Content-Disposition: form-data; name="' + name + '"';
  65.  
  66. if (/^\[object (?:Blob|File)(?:Constructor)?\]$/.test(valueType)) {
  67. return this.append(name,new Uint8Array(new FileReaderSync().readAsArrayBuffer(value)),filename || value.name);
  68. } else if (/^\[object (?:Uint8Array|ArrayBuffer)(?:Constructor)?\]$/.test(valueType)) {
  69. part += '; filename="'+ (filename || 'blob').replace(/"/g,'%22') +'"\r\n';
  70. part += 'Content-Type: application/octet-stream\r\n\r\n';
  71. this.__append(part);
  72. this.__append(value);
  73. part = '\r\n';
  74. } else {
  75. part += '\r\n\r\n' + value + '\r\n';
  76. }
  77. this.__append(part);
  78. };
  79. })();

猜你在找的PHP相关文章