這個插件爲什麼可以通過ajax上傳文件？

我們知道該文件不能通過ajax上傳，但我不明白爲什麼這ajax upload file plugin使用普通的ajax？這個插件爲什麼可以通過ajax上傳文件？

_upload: function(id, params){ 
     var file = this._files[id], 
      name = this.getName(id), 
      size = this.getSize(id); 

     this._loaded[id] = 0; 

     var xhr = this._xhrs[id] = new XMLHttpRequest(); 
     var self = this; 

     xhr.upload.onprogress = function(e){ 
      if (e.lengthComputable){ 
       self._loaded[id] = e.loaded; 
       self._options.onProgress(id, name, e.loaded, e.total); 
      } 
     }; 

     xhr.onreadystatechange = function(){    
      if (xhr.readyState == 4){ 
       self._onComplete(id, xhr);      
      } 
     }; 

     // build query string 
     params = params || {}; 
     params['qqfile'] = name; 
     var queryString = qq.obj2url(params, this._options.action); 

     xhr.open("POST", queryString, true); 
     xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
     xhr.setRequestHeader("X-File-Name", encodeURIComponent(name)); 
     xhr.setRequestHeader("Content-Type", "application/octet-stream"); 
     xhr.send(file); 
    }

我不喜歡這個插件，因爲你不能用jQuery和目標元素中使用它必須是一個ID，

function createUploader(){    
      var uploader = new qq.FileUploader({ 
       element: document.getElementById('file-uploader-demo1'), 
      action: 'upload-file.php', 
       onComplete: function(id, fileName, responseJSON){alert(responseJSON[0].filename)}, 
       debug: true 
      });   
     } 

     // in your app create uploader as soon as the DOM is ready 
     // don't wait for the window to load 
     window.onload = createUploader;

這將是我所需要的，如果我可以這樣做這與jquery，但我只是不知道如何改變源代碼，因爲它是用純JavaScript編寫的！

element: $('.upload'), or element: $('#upload'),

來源

2011-08-21 laukok

如果我沒有弄錯，更新的瀏覽器（除了原因的IE瀏覽器，部分webkit也是我認爲的），只能用ajax上傳文件。這是由於javascript/html5中的新文件api。哦，順便說一下，你知道jQuery **是** javascript，對吧？所以說你不能閱讀它，因爲它是純javascript，而不是jQuery只是沒有任何意義： -/ – Alxandr

大聲笑它需要更長的時間來理解純js比jquery ... :-)像普通的js ajax code - 我真的不明白它...... :-( – laukok

只是給你另一種選擇，有幾個很好的文件上傳是用jquery編寫的。如果你願意嘗試別人，我推薦Uploadify。但是，這個上傳器確實需要Flash。

編輯： 我不知道這個上傳器如何使用ajax;它可以像Sheen提到的那樣在html5中完成。然而，通過對計算器一點點的搜索，似乎你可以嘗試這讓它使用jQuery選擇工作：

element: $('#upload')[0];

，我發現，問題document-getelementbyid-vs-jquery

來源

2011-08-21 02:05:56

你沒有回答他的問題...... D：我也想知道。 – danem

@Pete我不知道他到底會做什麼將工具更改爲jquery，但是我已經成功使用Uploadify，我推薦這樣做，以便他知道還有其他選項可用，有時，問題的答案也可以間接地幫助askee直接而不是真正地解決問題回答他的問題 –

@jmein我認爲OP不想改變它，他想知道它是如何完成的 – Rafay

這看起來HTML5這個解決方案。你可以在html5中通過ajax進行文件上傳。 http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads

來源

2011-08-21 02:22:11

這個插件爲什麼可以通過ajax上傳文件？

回答

相關問題