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？

回答

相关问题