AJAX文件上傳/表單提交沒有jQuery或iframes？

是否可以在沒有jQuery或IFrame的情況下進行AJAX表單提交（如此純粹的JavaScript）？我目前正在發送到一個struts fileUploadAction的作品。動作的代碼是否仍然可以與異步提交一起工作，還是需要添加異步表單提交？AJAX文件上傳/表單提交沒有jQuery或iframes？

我用struts 1.x和當前我的形式：

<html:form action="fileUploadAction" method="post" enctype="multipart/form-data"> 
    ...form elements... 
    <html:file property="theFile" /> 
    ...other elements... 
</html:form>

可以這種形式提交，從而與AJAX上傳的文件？

來源

2012-07-16 edwardmlyte

是的，你可以通過JavaScript的 – 2012-07-16 14:36:52

並非所有的瀏覽器都支持它，而不IFRAME做到這一點。 – epascarello 2012-07-16 15:01:20

我已經看到了，我需要可以創建一個XMLHttpRequest或瀏覽器兼容性的ActiveXObject的，由JavaScript的一個例子的任何機會呢？ – edwardmlyte 2012-07-16 15:14:40

如果我理解你是正確的，你可以使用下面的代碼來上傳異步文件。隨意修改它

var AjaxFileUploader = function() { 
    this._file = null; 
    var self = this; 

    this.uploadFile = function (uploadUrl, file) { 
     var xhr = new XMLHttpRequest(); 
     xhr.onprogress = function (e) { 
      ... 
     }; 

     xhr.onload = function (e) { 
      ... 
     }; 

     xhr.onerror = function (e) { 
      ... 
     }; 

     xhr.open("post", uploadUrl, true); 

     xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
     xhr.setRequestHeader("X-File-Name", file.name); 
     xhr.setRequestHeader("X-File-Size", file.size); 
     xhr.setRequestHeader("X-File-Type", file.type); 

     xhr.send(file); 
    }; 
}; 

AjaxFileUploader.IsAsyncFileUploadSupported = function() { 
    return typeof (new XMLHttpRequest().upload) !== 'undefined'; 
} 

if (AjaxFileUploader.IsAsyncFileUploadSupported) { 
     ajaxFileUploader = new AjaxFileUploader(); 

     $("form").submit(function() { 
      var uploader = $("#fileUploader")[0]; 

      if (uploader.files.length == 0) { 
       return; 
      } else { 
       ajaxFileUploader.uploadFile(
        "/YourUploadUrl", 
        uploader.files[0]); 
      } 

      return false; 
     }); 
    }

要上傳表單，請使用FormData類，填充表單值並將其與XHR一起發佈。

更新： 對於HTML4嘗試以下

來源

2012-07-19 07:03:06 Madman

我認爲這個解決方案只能在支持HTML5的瀏覽器上工作，如果我錯了，請糾正我，所以如果瀏覽器不支持它，那麼你必須提供一個後備方法，這將使用iframe我猜 – 2012-07-19 07:22:31

是的。我開始認爲沒有非HTML5和非IFrames路線。 – edwardmlyte 2012-07-19 07:33:55

是的，這個解決方案只能用於HTML5。嘗試爲FileUploader找到一些polyfill。我看這裏https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills，但似乎沒有文件上傳替代品。在任何情況下，我認爲不需要太多時間來重寫上面的代碼，以在HTML4中工作 – Madman 2012-07-19 07:44:19

http://fineuploader.com/是一個AJAX文件上傳。

該插件使用XHR用於上傳與FF3.6 +，Safari4的+，Chrome瀏覽器進度條的多個文件，並回落到在其他瀏覽器隱藏的iframe基於上傳，處處提供良好的用戶體驗。

來源

2012-07-20 17:01:37 paulslater19

看起來這已被移動，現在需要您購買許可證（至少用於商業許可證） – paulslater19 2013-10-25 08:33:23

現在它已經移到了fineuploader（我已經更新了鏈接）。仍然是一項許可服務。 – edwardmlyte 2015-09-02 10:58:25

@edwardmlyte謝謝隊友 – paulslater19 2015-09-02 15:56:21

-3

無需添加jquery或任何其他第三方庫，只需添加IPerfect JS庫，你就可以走了。

IP_uploadFile（URL，的responseType，此[對象]，[dynamicFunctionForResponse]）

如果用戶選擇的responseType爲 'HTML' 然後dynamicFunctionForResponse將得到的HTML格式的響應。在下面的例子中，你將在alert中得到「完成」響應。

HTML

<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script> 


    <script language='javascript'> 
    function testResponse(data){ 
    alert(data) 
    } 
    </script>

身體

<form method="POST" enctype="multipart/form-data" onsubmit="IP_uploadFile('testupload.php','html',this,testResponse); return false;"> 
     <input type="file" name="file1"> 
     <input type="submit" name="submit1" value="Click here"> 
    </form>

PHP：testupload.php

move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]); 
    echo "done";

來源

2015-09-02 10:39:41

IPerfect JS library =第三方庫!!! – 2017-06-21 20:52:48

AJAX文件上傳/表單提交沒有jQuery或iframes？

回答

相關問題